<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS3模拟摩天轮效果</title> <style> .sunline{ position:relative; height: 400px; width: 400px; border: 2px solid transparent; border-radius: 50%; margin: 50px 0 0 50px; display: flex; animation: rotate 10s infinite linear; } .sun{ height: 100px; width: 100px; margin: auto; background-color: red; border-radius: 50%; box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red; } .earth{ margin: auto; height: 50px; width: 50px; background-color: blue; /*border-radius: 50%;*/ animation: -rotate 10s infinite linear; } @keyframes rotate{ 100%{transform:rotate(360deg);} } @keyframes -rotate{ 100%{transform:rotate(-360deg);} } </style> </head> <body> <div class="box"> <div class="sunline"> <div class="sun"></div> <div class=""> <div class="earth"></div> </div> </div> </div> </body>