效果 代码
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"/> <title>旋转的太极图</title> <meta name="author" content="JiuMeilove"/> <style> *{ margin:0; padding:0; } body{ background-color: #ccc; } body>div:first-of-type{ position:relative; width: 300px; height: 300px; margin: 100px auto; animation: rotate 2s infinite linear; } body>div:first-of-type>div:first-of-type{ height:100%; background-color: #fff; border-right: 150px solid #000; border-radius: 150px; } body>div>div:first-of-type~div{ position:absolute; top:0%; left:25%; width: 50px; height: 50px; background-color: #fff; border: 50px solid #000; border-radius: 75px; } body>div:first-of-type>div:last-of-type{ position:absolute; top:50%; left:25%; background-color: #000; border: 50px solid #fff; } @keyframes rotate { from {} to { transform: rotate(-360deg); } } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>