css3 鼠标滑过放大

CSS3中有一个很实用的特性，就是鼠标滑过放大效果。为了达到这个效果，需要用到CSS3的transform和transition属性，一起来看看如何实现吧。

/* 原始图片样式 */.img-container {
    position: relative;
}
.img-container img {
    display: block;
    width: 100%;
    height: auto;
}
/* 鼠标滑过放大效果 */.img-container:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease-out;
}
    

代码很简单，我们首先找到需要放大的图片所在的容器，将其设置为position:relative，这是为了防止子元素超出容器范围。接着设置img元素的宽度为100%，高度自适应。至此，我们已经完成了原始图片样式的设置。

接下来，我们将鼠标滑过img容器时的样式设为放大1.2倍，同时设置过渡效果为0.3秒，缓动方式为ease-out。这里需要注意的是，我们需要将过渡效果应用到img元素上，而不是img容器。

这样，当鼠标滑过img容器时，图片就会放大1.2倍，产生一种很好的交互效果。如果你在网页上经常看到图片放大效果，那么可以试一试这种实现方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！