通过css实现图片放大效果
css3当中有一个是过渡属性是transition，他要配和scale来使用，transition:scale(),这个括号里面填写数字，如果大于1，就是放大，如果小于1，就是缩小。
为了实现从一种效果变成一种效果，可以不用flash或者js，transition能够在鼠标单击，离开时，发生css属性值得改变，所以放大效果使用transition很不错！！！！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 300px; height: 300px; border: deepskyblue solid 1px; border-radius: 150px;/*显示圆角边框*/margin: 50px auto; overflow: hidden; /*隐藏多余溢出部分*/ } div img{transition: all 0.6s; /*所有的属性在0.6秒之内完成改变*/cursor: pointer; /*s鼠标移上去，变成一个小手的图标，这样比较美观*/} div img:hover{transform: scale(1.6);/*这个是根据图片比例放大到图片的1.6倍*//*transform: scale(0.6);同理，这个缩小0.6倍*/ } </style> </head> <body> <div> <img width="300px" src="img/哆啦A梦.jpg" /> </div> </body> </html>
这是我第一次写的blog，希望对需要的人有所帮助，O(∩_∩)O哈哈~~~
如果觉得《通过css实现图片过渡放大的效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[CSS] CSS实现鼠标移入图片放大效果](https://sm.tqys.net/uploadfile/pic/604.jpg)
