<!DOCTYPE HTNL> <html lang="en"> <html> <mate charset="utf-8"> <head> <title></title> <style> *{padding:0; margin:0;} div{ width:200px; height:200px; background-image: linear-gradient(90deg,red 50%,white 50%); border-radius:50%; margin:200px auto; animation:zhuan 2s infinite linear; } div:before{ content:""; width: 40px; height: 40px; background-color: white; border:30px solid red; position:absolute; left:50px; border-radius:50%; } div:after{ content:""; width: 40px; height: 40px; background-color:red; border:30px solid white; position:absolute; left:50px; top:100px; border-radius:50%; } @keyframes zhuan{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} </style> </head> <body style="background-color:black;"> <div></div> </body>
原文：https://www.cnblogs.com/niuyaomin/p/11616356.html