* { margin:0; padding:0; background:#040818; background-size:1000%; } .box { position:relative; width:800px; height:800px; margin:100px auto; transition:all 3s ease; transform-origin:center; animation:round 20s infinite linear; } @keyframes round { 0% { transform:rotateZ(0deg) } 100% { transform:rotateZ(360deg) } }.sn { position:absolute; top:calc(50% - 125px); left:calc(50% - 125px); border:1px solid gray; border-radius:50%; } .sn_1 { width:250px; height:250px; z-index:99; animation:round 10s infinite linear; } .sn_1::after { position:absolute; left:0px; top:75px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:red; } .sn_2::before { position:absolute; content:''; display:block; width:5px; height:5px; background-color:chartreuse; border-radius:50%; left:25px; top:40px; transform-origin:12px 12px; animation:round 5s infinite linear; } .sn_2 { top:calc(50% - 150px); left:calc(50% - 150px); width:300px; height:300px; z-index:89; background-size:100%; } .sn_2::after { position:absolute; left:30px; top:45px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:lawngreen; } .sn_3 { top:calc(50% - 175px); left:calc(50% - 175px); width:350px; height:350px; z-index:79; background-size:100%; } .sn_3::after { position:absolute; left:30px; top:55px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:fuchsia; } .sn_4 { position:absolute; top:calc(50% - 200px); left:calc(50% - 200px); width:400px; height:400px; z-index:69; background-size:100%; animation:round 8s infinite linear; } .sn_4::after { position:absolute; left:25px; top:300px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:tomato; } .sn_5::before { position:fixed; left:207px; top:0px; content:''; display:block; width:5px; height:5px; background-color:#CC9900; border-radius:50%; z-index:60 } .sn_5 { top:calc(50% - 225px); left:calc(50% - 225px); width:450px; height:450px; z-index:59; animation:round 15s infinite linear; } .sn_5::after { position:absolute; left:200px; top:-8px; content:''; display:block; width:15px; height:20px; border-radius:50%; background:#040818; border:2px solid gray; } .sn_6 { top:calc(50% - 250px); left:calc(50% - 250px); width:500px; height:500px; z-index:49; } .sn_6::after { position:absolute; left:50px; top:400px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:#fff; } .sn_7 { top:calc(50% - 275px); left:calc(50% - 275px); width:550px; height:550px; z-index:39; } .sn_7::after { position:absolute; left:500px; top:120px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:purple; } .sn_8 { top:calc(50% - 300px); left:calc(50% - 300px); width:600px; height:600px; z-index:29; } .sn_8::after { position:absolute; left:300px; top:-8px; content:''; display:block; width:15px; height:15px; border-radius:50%; background-color:orange; } .sn_9 { top:calc(50% - 325px); left:calc(50% - 325px); width:650px; height:650px; z-index:19; } .sn_9::after { position:absolute; left:200px; top:10px; content:''; display:block; width:20px; height:20px; border-radius:50%; background-color:blue; } .sn_10 { top:calc(50% - 75px); left:calc(50% - 75px); background:#CC9900; width:150px; height:150px; z-index:100; box-shadow:0 0 25px 5px #CC9900; }
更新时间:2019-09-08 22:44:04
行星环绕动画 .使用动画完成的运动旋转