0.5) ; border-radius : 50% ;} @keyframes rot { 0%{transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ position: relative; width: 0px; height: 200px; margin: 50px auto; background-color: #00FFFF; border-left: 100px solid black; border-right: 100px solid white; box-shadow: 0 0 50px rgba(0,0,0,0.5); border-radius: 50%; } @keyframes rot{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } .main:hover{ animation: rot 0.6s linear infinite; } .main:before{ content: ""; position: absolute; left: -50px; top: 0px; width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 100px 0 black; background-color: white; } .main:after{ content: ""; position: absolute; left: -25px; top: 20px; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 100px 0 white; background-color: black; } </style> </head> <body> <div> </div> </body> </html>
效果图：
为.main这个div加上hover伪类，有旋动弹画。
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31925.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")