<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标放上边框变虚转圈效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> body { width: 400px; height: 400px; margin: 50px auto; } .box { width: 100%; height: 100%; background: #ca1fd9; text-align: center; } .box-1 { display: inline-block; width: 320px; height: 320px; margin-top: 38px; border: 15px solid rgba(255, 255, 255, 1); border-radius: 50%; box-sizing: border-box; transform: all 2s; } .box-1:before { display: inline-block; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; content: ""; } .box-1:hover { border: 15px solid rgba(255, 255, 255, 0); } .box-1:hover:before { border: dashed 30px #fff; animation: zz 9s linear infinite; } p { margin: -60% auto; width: 80%; font-size: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: aliceblue; } @keyframes zz { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="box"> <div class="box-1"> <p>转圈效果</p> </div> </div> </body> </html>
