王者荣耀缩放案例
王者荣耀缩放案例
王者荣耀缩放案例
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 200px;
margin: 200px auto;
overflow: hidden;
}
img {
/* 谁做过渡给谁加!注意是图片变化了 不是box盒子 !! */
transition: 2s;
}
.box img:hover {
/* 大于1放大 小于1缩小 */
/* transform: scale(.2); */
/* 默认内容是允许溢出容器的,想让溢出的部分隐藏 需要添加overflow: hidden; */
transform: scale(1.8);
}
<body>
<div class="box">
<img src="./images/lb.jpg" alt="">
</div>
</body>
- 效果
lb
总结
利用 transform: scale(值),实现图片的缩放效果