CSS3鼠标悬浮图片闪动效果
分类:实例代码
CSS3鼠标悬浮图片闪动效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了鼠标悬浮能够实现图片闪动的效果。
首先需要悬浮于文字之上出现图片,然后再悬浮于图片之上测试效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> @keyframes btnZoom { 0% { opacity: 1.0; transform: scale(1, 1); } 60% { opacity: 0.0; transform: scale(1.2, 1.2); } 100% { opacity: 0.0; } } h3 { color: red; text-align: center; } .wrap { position: relative; width: 100px; margin: 0 auto; } .wrap,.wrap span { cursor: pointer; display: block; width: 205px; height: 205px; background: url(demo/CSS/img/antzone.png) -404px -153px no-repeat; } .wrap span { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; opacity: 0; } .wrap:hover span { animation: btnZoom infinite linear 0.8s; } </style> </head> <body> <h3>前端教程网欢迎您</h3> <div class="wrap"> <span></span> </div> </body> </html>
CSS3鼠标悬浮图片闪动效果,这样的场景在实际项目中还是用的比较多的,关于CSS3鼠标悬浮图片闪动效果就介绍到这了。