<!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 class="main"> </div> </body> </html>
效果图：
为.main这个div加上hover伪类，有旋转动画。
原文：https://www.cnblogs.com/Tisou1/p/12173717.html