|
@@ -163,14 +163,14 @@ export default {
|
|
}
|
|
}
|
|
.planet {
|
|
.planet {
|
|
position: absolute;
|
|
position: absolute;
|
|
- left:390px;
|
|
|
|
|
|
+ left:350px;
|
|
top:30px;
|
|
top:30px;
|
|
border: 5px solid #13c2c2;
|
|
border: 5px solid #13c2c2;
|
|
width: 1200px;
|
|
width: 1200px;
|
|
height: 1200px;
|
|
height: 1200px;
|
|
- transform: scaleY(0.5) rotateZ(30deg);
|
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
|
|
+ animation: planet-rotate 16s linear infinite;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@@ -179,12 +179,14 @@ export default {
|
|
height: 200px;
|
|
height: 200px;
|
|
position: absolute;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
- left: calc(50% - 25px);
|
|
|
|
- top: -100px;
|
|
|
|
|
|
+ left: calc(50% - 120px);
|
|
|
|
+ top: -120px;
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 200px;
|
|
line-height: 200px;
|
|
color: #13c2c2;
|
|
color: #13c2c2;
|
|
transform: rotateZ(-30deg) scaleY(2);
|
|
transform: rotateZ(-30deg) scaleY(2);
|
|
|
|
+ animation: self-rotate 16s linear infinite;
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
position: absolute;
|
|
position: absolute;
|
|
top:20px;
|
|
top:20px;
|
|
@@ -201,49 +203,43 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.second {
|
|
.second {
|
|
- left: calc(50% + 450px);
|
|
|
|
- top: 400px;
|
|
|
|
|
|
+ left: calc(82% + 27px);
|
|
|
|
+ top: 180px;
|
|
}
|
|
}
|
|
.third {
|
|
.third {
|
|
- left: calc(50% + 230px);
|
|
|
|
- top: 910px;
|
|
|
|
|
|
+ left: calc(50% + 395px);
|
|
|
|
+ top: 770px;
|
|
}
|
|
}
|
|
.four {
|
|
.four {
|
|
- left: calc(50% - 300px);
|
|
|
|
- top: 1030px;
|
|
|
|
|
|
+ left: calc(50% - 120px);
|
|
|
|
+ top: 1110px;
|
|
}
|
|
}
|
|
.five {
|
|
.five {
|
|
- left: calc(50% - 745px);
|
|
|
|
- top: 480px;
|
|
|
|
|
|
+ left: calc(50% - 650px);
|
|
|
|
+ top: 770px;
|
|
}
|
|
}
|
|
.six {
|
|
.six {
|
|
- left: calc(50% - 530px);
|
|
|
|
- top: 10px;
|
|
|
|
- }
|
|
|
|
- .planet {
|
|
|
|
- animation: planet-rotate 16s linear infinite;
|
|
|
|
|
|
+ left: calc(50% - 635px);
|
|
|
|
+ top: 180px;
|
|
}
|
|
}
|
|
|
|
|
|
- .ball {
|
|
|
|
- animation: self-rotate 16s linear infinite;
|
|
|
|
- }
|
|
|
|
/* // 公转动画 */
|
|
/* // 公转动画 */
|
|
@keyframes planet-rotate {
|
|
@keyframes planet-rotate {
|
|
0% {
|
|
0% {
|
|
- transform: rotateX(60deg)scaleY(0.5) rotate(0);
|
|
|
|
|
|
+ transform: rotateX(85deg) rotate(0);
|
|
}
|
|
}
|
|
100% {
|
|
100% {
|
|
- transform: rotateX(60deg) scaleY(0.5) rotate(360deg);
|
|
|
|
|
|
+ transform: rotateX(85deg) rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* // 自转动画 */
|
|
/* // 自转动画 */
|
|
@keyframes self-rotate {
|
|
@keyframes self-rotate {
|
|
0% {
|
|
0% {
|
|
- transform: rotate(0) scaleY(2) rotateX(-60deg);
|
|
|
|
|
|
+ transform: rotate(0) rotateX(-85deg);
|
|
}
|
|
}
|
|
100% {
|
|
100% {
|
|
- transform: rotate(-360deg) scaleY(2) rotateX(-60deg);
|
|
|
|
|
|
+ transform: rotate(-360deg) rotateX(-85deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|