body {
background:#b1dfbb
}
.sha {
width:300px;
height:300px;
margin:200px auto;
box-shadow:2px 2px 2px #999999;
position:relative;
overflow:hidden;
background:#03A9F4;
}
span {
display:inline-block;
width:600px;
height:600px;
border-radius:40%;
background:white;
position:absolute;
bottom:100px;
left:-150px;
animation:zhuan linear infinite;
}
span:nth-child(5) {
animation-duration:6s;
opacity:.9
}
span:nth-child(2) {
animation-duration:6s;
opacity:.5
}
span:nth-child(3) {
animation-duration:8s;
opacity:.3
}
span:nth-child(4) {
animation-duration:10s;
opacity:.5
}
@keyframes zhuan {
from {
transform:rotate(360deg);
}
}.taiyang {
position:absolute;
width:40px;
height:40px;
background:#e0a800;
z-index:1;
left:600px;
top:35px;
border-radius:50%;
-webkit-box-reflect:below 160px;
box-reflect:below 160px;
}
p {
width:40px;
height:40px;
opacity:.1;
position:absolute;
top:-16px;
z-index:0;
animation:zhuan linear infinite;
}
p:nth-child(1) {
animation-duration:2s;
background:coral
}
p:nth-child(2) {
animation-duration:3s;
background:red
}
p:nth-child(3) {
animation-duration:4s;
background:yellow
}
p:nth-child(4) {
animation-duration:5s;
background:darkred
}
p:nth-child(5) {
animation-duration:6s;
background:indianred
}
p:nth-child(6) {
animation-duration:7s;
background:mediumvioletred
}
p:nth-child(7) {
animation-duration:8s;
background:orangered
}
p:nth-child(8) {
animation-duration:9s;
background:palevioletred
}
p:nth-child(9) {
animation-duration:10s;
background:orange
}
p:nth-child(10) {
animation-duration:11s;
background:orangered
}
.taizuan {
z-index:5;
width:1200px;
height:1200px;
border-radius:50%;
left:-460px;
position:relative;
margin:0 auto;
animation:zhuan 60s linear infinite;
}
.yueliang {
position:absolute;
width:40px;
height:40px;
background:#e0a800;
z-index:1;
left:600px;
top:926px;
border-radius:50%;
-webkit-box-reflect:below 160px;
box-reflect:below 160px;
background:yellow
}