用CSS3实现鼠标移动到图片上图片变大效果

作者：没什么大不了 | 创建时间: 2023-05-01

css3出来了好多让你兴奋的属性，很多效果直接可以不用js就可以写出来了，这可欢喜了我们这些不大懂js的同学了。特此讲解一下这个图片放大的效果。发现好多站都使用的了这个效果挺好的。不仔细研究一下真是好多问题，特此整理。...

先写好一个样子，图片随便一张：如图（图片，css,html）

这里图片加了边框，你可能不明白他的用途，这里说一下，加边框为了是让图片放大的时候，图像也是在方框里变大，而出现一个放大的效果，不至于把其他模块遮住，如图：

边框要注意的是：一定要加上。很多人没有注意，这也是自己做出来不好看的原因，这样放大更加自然，不会超出边框，如图：

实现他的变大和过渡效果，大家一定要记住：transform是控制变形的，transition是控制过渡的：如图： transition: all 0.6s; transform: scale(1.4); -webkit-transform: scale(1.4);

这是0.6 是调节时间的自己随便调，1.4是调节变形大小的放大多少倍。如图（放大倍数变的好大）：

注意div一定要加overflow: hidden;

有的浏览器会不支持看不到效果，一般要加上-webkit-