用css写一个简单的太阳系,当然下面的太阳与地球是图片
以下为代码部分
@keyframes rotate {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
*{
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
margin: 0 auto;
}
.solarsys{
width: 80%;
height: 100%;
background:linear-gradient(90deg, rgb(16, 16, 19),rgb(65, 66, 66),rgb(16, 16, 19));
background-color: #000;
margin: 0 auto;
position: relative;
}
.solarsys div{
border-radius: 50%;
position: absolute;
}
.sun{
/* width: 150px; */
/* height: 150px; */
border-radius: 50%;
background-color: #f05121;
box-shadow: 1px 1px 20px 10px #f05121;
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.run{
width: 150px;
height: 150px;
border-radius: 50%;
}
.mercuryOrbit{
width: 170px;
height: 170px;
border: 1px dotted #fff;
top: calc(50% - 85px);
left: calc(50% - 85px);
}
.mercury{
width: 10px;
height: 10px;
background-color: rgb(206, 248, 16);
box-