我们都知道太阳系是以太阳为中心的，和所有受到太阳的引力约束天体的集合体。包括八大行星(由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星)，而我用html和css所写的就是八大行星和太阳组成的星系，比较简易，代码如下：

* {

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

}

}