鼠标经过图片缓慢放大缩小代码CSS3,新起点亲身测试可以实现的代码,非常简单好用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3图片缓慢放大缩小</title> <style> .div{ width: 200px; height: 200px; margin: 150px auto 0; } /* 如果放大图片的话掩盖住其他内容大家可以在图片外层标签元素设定overflow: hidden */ .div img{ transition: all 2s ease 0s; } /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */ .div img:hover{ /**1.2为放大,1以下是缩小数值大家自己选择**/ transform: scale(1.2); /*transition: all 2s ease-in-out 0s;*/ } </style> </head> <body> <div class="div"> <img src="img.jpg"> </div> </body> </html>
本文地址:https://www.henenseo.com/archives/1965
关注我们:请关注一下我们的微信公众号:扫描二维码
,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
关注我们:请关注一下我们的微信公众号:扫描二维码

版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!