<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .wrapper { width: 300px; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; animation: move 10s infinite linear; /*border: 1px solid red;*/ } @keyframes move { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circleFB { width: 300px; height: 300px; background-color: #000000; position: absolute; top: 0; border-radius: 50%; } .circleSB { width: 150px; height: 300px; background-color: white; border-radius: 0 150px 150px 0; position: absolute; top: 0; right: 0; } .circleFB1 { width: 150px; height: 150px; background-color: #000000; border-radius: 50%; position: absolute; left: 75px; } .circleFB2 { width: 150px; height: 150px; background-color: white; border-radius: 50%; position: absolute; left: 75px; bottom: 0px; } #samllW { width: 40px; height: 40px; border-radius: 50%; background-color: white; position: absolute; left: 55px; top: 55px; } #samllB { width: 40px; height: 40px; border-radius: 50%; background-color: #000000; position: absolute; left: 55px; bottom: 55px; } </style> <body> <div class="wrapper"> <div class="circleFB"></div> <div class="circleSB"></div> <div class="circleFB1"> <div id="samllW"></div> </div> <div class="circleFB2"> <div id="samllB"></div> </div> </div> </body> </html>
效果：
