|
@@ -156,10 +156,13 @@ body {
|
|
}
|
|
}
|
|
@keyframes InitMeteorBgIn {
|
|
@keyframes InitMeteorBgIn {
|
|
0% {
|
|
0% {
|
|
|
|
+ transform: translate3d(0, 100%, 0)
|
|
|
|
+ }
|
|
|
|
+ 20% {
|
|
transform: scale(4) translate3d(0, 80%, 0) rotate3d(1, 1, 1, 30deg);
|
|
transform: scale(4) translate3d(0, 80%, 0) rotate3d(1, 1, 1, 30deg);
|
|
}
|
|
}
|
|
100% {
|
|
100% {
|
|
- transform: scale(1);
|
|
|
|
|
|
+ transform: scale(1) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes MeteorRotate {
|
|
@keyframes MeteorRotate {
|
|
@@ -233,10 +236,10 @@ body {
|
|
}
|
|
}
|
|
@keyframes Scale {
|
|
@keyframes Scale {
|
|
from {
|
|
from {
|
|
- transform: scale(1);
|
|
|
|
|
|
+ transform: scale(1) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
to {
|
|
to {
|
|
- transform: scale(1.5);
|
|
|
|
|
|
+ transform: scale(1.5) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes FadeBottomIn {
|
|
@keyframes FadeBottomIn {
|
|
@@ -364,10 +367,11 @@ body {
|
|
}
|
|
}
|
|
|
|
|
|
.page-1 .meteor-bg.show {
|
|
.page-1 .meteor-bg.show {
|
|
- animation: InitMeteorBgIn 4s ease-out 1, Scale 10s 5s ease infinite alternate;
|
|
|
|
|
|
+ animation: InitMeteorBgIn 4s ease-out 1 forwards, Scale 10s 5s ease infinite alternate;
|
|
}
|
|
}
|
|
.page-1 .meteor-bg {
|
|
.page-1 .meteor-bg {
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
+ transform: translate3d(0, 100%, 0);
|
|
bottom: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|