鼠标悬浮从中心放大和缩小的半透明遮罩层
分类:实例代码
鼠标悬浮从中心放大和缩小的半透明遮罩层属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了鼠标悬浮元素,能够出现遮罩层。
并且这个遮罩层能够实现从中心放大和缩小功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .course{ width: 255px; height: 300px; overflow: hidden; margin: 10px; background:#ccc; position:relative; } .course .zhezhao { display: block; -webkit-transition: 1s; width:0px; height:0px; transition: 1s; position:absolute; opacity:0.6; background-color:black; left:50%; top:50%; transform:translate(-50%,-50%); } .course:hover .zhezhao { width: 255px; height: 300px; } </style> </head> <body> <div class="course"> <div class="zhezhao"></div> </div> </body> </html>
鼠标悬浮从中心放大和缩小的半透明遮罩层,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮从中心放大和缩小的半透明遮罩层就介绍到这了。