鼠标移入时闪闪发光的效果
Posted 代码工小王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标移入时闪闪发光的效果相关的知识，希望对你有一定的参考价值。
<!doctype html> [code=html,html 代码,true]<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; list-style: none; } .box{ margin: 100px; } li{ position: relative; float: left; width: 50px; height: 50px; margin-right: 100px; } span{ width: 100px; height: 100px; margin: 12px; display: block; border-radius: 50%; background: -webkit-linear-gradient(red, blue); transition:1s all ease; } li:hover span{ transform:rotateZ(360deg); } @keyframes warn { 0% { transform: scale(1); opacity: 0.8; } 20% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1.2); opacity: 0.4; } 60% { transform: scale(1.4); opacity: 0.2; } 80% { transform: scale(1.6); opacity: 0.1; } 100% { transform: scale(1.8); opacity: 0.0; } } a:before{ border: 12px solid #A8E957; content:‘‘; position: absolute; width: 100px; height: 100px; border-radius: 62px; opacity: 0; } li:hover a:before{animation: warn 1s ease-out infinite;} </style> </head> <body> <div class="box"> <ul> <li> <a href="#"> <span></span> </a> </li> <li> <a href="#"> <span></span> </a> </li> <li> <a href="#"> <span></span> </a> </li> <li> <a href="#"> <span></span> </a> </li> </ul> </div> </body> </html>
以上是关于鼠标移入时闪闪发光的效果的主要内容，如果未能解决你的问题，请参考以下文章