版权声明:支持技术共享 https://blog.csdn.net/qq_38350907/article/details/83743324
荆轲刺秦王
有时候我们在静态网页中需要加一些动作,或者特效使我们的网页效果看起来更生动
我们经常会看到有些网站的图片是这样的效果:
<style>
.img_box{width:200px;height:200px;overflow: hidden;}
.img{width:100%;transition: all 0.6s;}
.img:hover{transform: scale(1.2);}
</style>
<div class="img_box"><img src="https://img-blog.csdnimg.cn/20181105090020709.jpg" class="img"></div>
代码分析:
1、首先知道 div 和 img 的层次关系,img 是在 div 里面,图片放大后不应该超出 div 的盒子。
2、设置 div 的 overflow: hidden; 属性,作用是图片变大后超过 div 区域的部分会自动隐藏。
3、设置 transition: all 0.6s; 属性和 transform: scale(1.2); 属性,其中 transition: all 0.6s; 是变化速度,数值越小速度越快,而 transform: scale(1.2); 是变化范围, scale(1.2) 是放大1.2倍的意思。
扩展一:如果我们希望图片不受限于 div 里面 只需要把 div 的overflow: hidden; 属性去掉就可以了。
扩展二:考虑到不同浏览器的兼容性,可以将 img 的属性改为:
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;
-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);