CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例
Posted JackieDYH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例相关的知识，希望对你有一定的参考价值。
transform:scale()可以实现按比例放大或者缩小功能。transition可以设置动画执行的时间，实现缓慢或者快速的执行动画
<body>
<div>
<img src="https://img-blog.csdnimg.cn/2021031616343485.gif">
</div>
</body>div {
width: 400px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden; //图片超出div部分隐藏
}
div img {
width: 100%;
height: 100%;
transition: all 0.6s; //设置动画执行的时间为0.6s
cursor: pointer;
}
div img:hover {
transform: scale(1.3); //设置图片按照比例放大1.3倍
}在线演示
以上是关于CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例的主要内容，如果未能解决你的问题，请参考以下文章