本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放（缓慢变化，有过渡效果，缩放的过程是有动画过渡的）效果，主要用到CSS transform属性，CSS transform属性，以下实现效果和具体的实现方法，希望对你有所帮助。
先来看下效果预览
代码解读
HTML部分的代码
- @@##@@
- @@##@@
登录后复制
定义容器大小，overflow: hidden;可以在子容器的大小超过父容器的时候，隐藏溢出的部分
* {margin: 0;padding: 0;font-family: "微软雅黑";}ul li{list-style: none;}.content{width: 310px;height: 420px;padding: 5px;border: 1px solid #000;margin: 10px auto;}/*定义容器的大小*/.content ul li{display: block;width: 300px;margin: 0 auto;margin: 5px;overflow: hidden;/*隐藏溢出*/border: 1px solid #000;}
登录后复制
定义图片的原始缩放比例transform: scale(1)，。
图片缩放时的过度效果： transition: all 1s ease 0s;全部样式在1秒内缓动（逐渐变慢）的变化，除了ease（默认值）之外transition属性还有： linear（匀速），ease-in：(加速)，ease-out：（减速），ease-in-out：（加速然后减速）
立即学习“前端免费学习笔记（深入）”；
.content ul li img{display: block;border: 0;width: 100%;transform: scale(1);transition: all 1s ease 0s;-webkit-transform: scale(1);-webkit-transform: all 1s ease 0s;}
登录后复制
鼠标移动到图片时，图片的缩放效果：scale()里的值大于1，放大；scale()里的值小于1，缩小。
/*图片放大*/.content ul li:hover .amplify{transform: scale(1.3);transition: all 1s ease 0s;-webkit-transform: scale(1.3);-webkit-transform: all 1s ease 0s;}/*图片缩小*/.content ul li:hover .narrow{transform: scale(0.8);transition: all 1s ease 0s;-webkit-transform: scale(0.8);-webkit-transform: all 1s ease 0s;}
登录后复制
以上就是CSS实现鼠标经过图片上图片等比缩放效果（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2892921.html
