CSS3实现鼠标滑动图片缩放效果

100人浏览 2024-11-27 09:03:06

浏览网页时往往会遇到类鼠标滑过图片时图片会进行缩放的效果，简单来说就是利用CSS3 中的2D转换的缩放加上一些简单的属性设置实现的，img:hover+scale实现鼠标到图片时的图片缩放，transition添加过渡效果，使图片的缩放更加自然，设置overflow:hidden，使图片放大后超出部分不再显示。

注：div宽高与img宽高均需设置，并且img图片需设置宽高与div盒子宽高相同。如果图片设置宽高小于div盒子的宽高，则会出现img盒子整体放大的效果，而不是只是图片本身的放大；若图片设置图片宽高大于div盒子的宽高，则会出现图片显示不完整的情况。具体代码及效果如下图所示：