! doctype html html head meta charset ="utf-8" meta name ="author" content ="http://www.softwhy.com/" / title / title style * { padding : 0 ; margin : 0 ; } body { width : 100% ; height : 100% ; background-color : #9370DB ; } ul { height :
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title></title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background-color: #9370DB; } ul { height: 600px; width: 600px; margin: 50px auto; list-style: none; /* background: red; */ } ul li { /* 在页面的中间呈现 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #D3D3D3; } /* 最中间圆的设置--太阳 */ li:nth-child(1) { width: 60px; height: 60px; border-radius: 50%; /* 设置阴影 */ box-shadow: 0 0 50px #FAFF27; background-color: #FAFF27; } /* 设置第二个轨道线 */ li:nth-child(2) { width: 120px; height: 120px; border-radius: 50%; /* animation简写：名称 时间 速度（下面设置的速度从头到尾相同） 播放次数（此为无限） */ animation: rotate 30s linear infinite; } /* 水星设置 */ li:nth-child(2) span { width: 15px; height: 15px; border-radius: 50%; background-color: deepskyblue; position: absolute; top: 0; left: 25px; } li:nth-child(3) { width: 180px; height: 180px; border-radius: 50%; animation: rotate 20s linear infinite; } /* 金星 */ li:nth-child(3) span { width: 20px; height: 20px; border-radius: 50%; background-color: gold; position: absolute; top: 0; left: 35px; } li:nth-child(4) { width: 240px; height: 240px; border-radius: 50%; animation: rotate 20s linear infinite; } /* 地球 */ li:nth-child(4) > span { width: 25px; height: 25px; border-radius: 50%; background-color: #6dff39; position: absolute; top: 0; left: 135px; animation: rotate 10s linear infinite; } /* 月亮 */ li:nth-child(4) > span span { width: 10px; height: 10px; border-radius: 50%; background-color: #ff40c0; position: absolute; top: 0; left: 30px; } li:nth-child(5) { width: 300px; height: 300px; border-radius: 50%; animation: rotate 10s linear infinite; } /* 火星 */ li:nth-child(5) span { width: 18px; height: 18px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 90px; } li:nth-child(6) { width: 360px; height: 360px; border-radius: 50%; animation: rotate 30s linear infinite; } /* 木 */ li:nth-child(6) span { width: 24px; height: 24px; border-radius: 50%; background-color: burlywood; position: absolute; top: 0; left: 100px; } li:nth-child(7) { width: 420px; height: 420px; border-radius: 50%; animation: rotate 40s linear infinite; } /* 土 */ li:nth-child(7) > span { width: 25px; height: 25px; border-radius: 50%; background-color: brown; position: absolute; top: 0; left: 190px; animation: rotate 15s linear infinite; } li:nth-child(8) { width: 480px; height: 480px; border-radius: 50%; animation: rotate 10s linear infinite; } /* 天王 */ li:nth-child(8) span { width: 15px; height: 15px; border-radius: 50%; background-color: #3f8042; position: absolute; top: 0; left: 175px; } li:nth-child(9) { width: 540px; height: 540px; border-radius: 50%; animation: rotate 20s linear infinite; } li:nth-child(9) span { width: 30px; height: 30px; border-radius: 50%; background-color: #0000FF; position: absolute; top: 0; left: 175px; } /* 关键帧 */ @keyframes rotate { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } </style> </head> <body> <ul> <li></li> <li><span></span></li> <li><span></span></li> <li><span><span></span></span></li> <li><span></span></li> <li><span></span></li> <li><span><span></li> <li><span></span></li> <li><span></span></li> </ul> </body> </html>