鼠标悬浮图片实现缩放效果
分类:实例代码
鼠标悬浮图片实现缩放效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了鼠标悬浮,图片缩放效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .course-list-img { width: 255px; height: 300px; overflow: hidden; float: left; margin: 10px; background:#ccc; } .course-list-img img { display: block; -webkit-transition: 1s; transition: 1s; } .course-list-img .img:hover { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); } </style> </head> <body> <div class="course-list-img"> <img class="img" src="demo/CSS/img/pretty.jpg"> </div> </body> </html>
上面的代码鼠标悬浮,可以实现图片的缩放效果,代码非常简单,关键是对几个css3属性的掌握。
相关阅读:
(1).transition属性参阅CSS3 transition一章节。
(2).transform:scale()参阅transform: scale()用法介绍一章节。
鼠标悬浮图片实现缩放效果,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮图片实现缩放效果就介绍到这了。