* {
margin:0;
padding:0;
}
body {
background:url("images/timgq.jpg");
}
.wrap {
width:800px;
height:800px;
margin:60px auto;
position:relative;
}
.po {
position:absolute;
display:inline-block;
text-align:center;
vertical-align:middle;
}
.sun {
width:100px;
height:100px;
border-radius:50%;
background:url("images/sun1.jpg") no-repeat;
background-size:cover;
top:350px;
left:350px;
}
.sun1 {
width:200px;
height:200px;
border-radius:50%;
border:1px dashed black;
top:300px;
left:300px;
}
.sun2 {
width:300px;
height:300px;
border-radius:50%;
border:1px dashed grey;
top:250px;
left:250px;
}
.sun3 {
width:400px;
height:400px;
border-radius:50%;
border:1px dashed black;
top:200px;
left:200px;
}
.sun4 {
width:500px;
height:500px;
border-radius:50%;
border:1px dashed grey;
top:150px;
left:150px;
}
.sun5 {
width:600px;
height:600px;
border-radius:50%;
border:1px dashed black;
top:100px;
left:100px;
}
.sun6 {
width:700px;
height:700px;
border-radius:50%;
border:1px dashed grey;
top:50px;
left:50px;
}
.sun7 {
width:800px;
height:800px;
border-radius:50%;
border:1px dashed black;
top:0;
left:0;
}
.sun8 {
width:900px;
height:900px;
border-radius:50%;
border:1px dashed grey;
top:-50px;
left:-50px;
}
.er1 {
transform-style:preserve-3d;
perspective:600px;
}
.er1 img {
width:30px;
height:30px;
border-radius:50%;
position:absolute;
top:85px;
left:-15px;
transform-origin:115px 15px;
transition:all 1s linear;
}
.er2 img {
width:40px;
height:40px;
border-radius:50%;
position:absolute;
top:125px;
left:-20px;
transform-origin:171px 15px;
transition:all 1s linear;
}
.er3 img {
width:50px;
height:50px;
border-radius:50%;
position:absolute;
top:180px;
left:-20px;
transform-origin:220px 15px;
transition:all 1s;
}
.er4 img {
width:40px;
height:40px;
position:absolute;
top:230px;
left:-20px;
border-radius:50%;
transform-origin:270px 15px;
transition:all 1s;
}
.er5 img {
width:40px;
height:40px;
border-radius:50%;
position:absolute;
top:280px;
left:-20px;
transform-origin:320px 15px;
transition:all 1s;
}
.er6 img {
width:40px;
height:40px;
position:absolute;
top:330px;
left:-20px;
border-radius:50%;
transform-origin:370px 15px;
transition:all 1s;
}
.er7 img {
width:40px;
height:40px;
position:absolute;
top:380px;
left:-20px;
border-radius:50%;
transform-origin:420px 15px;
transition:all 1s;
}
.er8 img {
width:40px;
height:40px;
position:absolute;
top:430px;
left:-20px;
border-radius:50%;
transform-origin:470px 15px;
transition:all 1s linear;
}
.roll1 {
animation:roll 7.5s linear infinite;
}
.roll2 {
animation:roll 18s linear infinite;
}
.roll3 {
animation:roll 30s linear infinite;
}
.roll4 {
animation:roll 54s linear infinite;
}
.roll5 {
animation:roll 354s linear infinite;
}
.roll6 {
animation:roll 870s linear infinite;
}
.roll7 {
animation:roll 2520s linear infinite;
}
.roll8 {
animation:roll 4950s linear infinite;
}
@keyframes roll {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}transform-style: preserve-3d;perspective: 600px;3d动画前:需要设置3d场景,以及景深效果行星旋转时应该要设置她的旋转中心transform-origin为太阳