html css怎么做太阳,Html+css编写太阳星系

}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);

}}