624 lines
8.7 KiB
CSS
624 lines
8.7 KiB
CSS
@keyframes degs{
|
|
0%{
|
|
transform: rotate(0deg);
|
|
}
|
|
50%{
|
|
transform: rotate(720deg);
|
|
}
|
|
100%{
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
/*灯光闪烁*/
|
|
@keyframes Lighting{
|
|
0%{
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
/*全屏抖动*/
|
|
@keyframes scale-body{
|
|
0%{
|
|
transform: scale(1);
|
|
}
|
|
33%{
|
|
transform: scale(1.01);
|
|
}
|
|
66%{
|
|
transform: scale(1);
|
|
}
|
|
72%{
|
|
transform: scale(1.01);
|
|
}
|
|
80%{
|
|
transform: scale(1);
|
|
}
|
|
88%{
|
|
transform: scale(1.01);
|
|
}
|
|
100%{
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes scale{
|
|
0%{
|
|
transform: scale(1);
|
|
}
|
|
100%{
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
@keyframes blendmode{
|
|
0%{
|
|
mix-blend-mode: color-dodge;
|
|
}
|
|
33%{
|
|
mix-blend-mode: difference;
|
|
}
|
|
66%{
|
|
mix-blend-mode: luminosity;
|
|
}
|
|
100%{
|
|
mix-blend-mode: color-dodge;
|
|
}
|
|
}
|
|
/**/
|
|
@keyframes dancing-left{
|
|
0%{
|
|
left: -50px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
5%{
|
|
left: -40px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
10%{
|
|
left: -30px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
15%{
|
|
left: -20px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
20%{
|
|
left: -10px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
25%{
|
|
left: 0px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
30%{
|
|
left: 10px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
35%{
|
|
left: 20px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
40%{
|
|
left: 30px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
45%{
|
|
left: 40px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
50%{
|
|
left: 50px;
|
|
top:0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
55%{
|
|
left: 40px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
60%{
|
|
left: 30px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
65%{
|
|
left: 20px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
70%{
|
|
left: 10px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
75%{
|
|
left: 0px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
80%{
|
|
left: -10px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
85%{
|
|
left: -20px;
|
|
top:10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
90%{
|
|
left: -30px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
95%{
|
|
left: -40px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
100%{
|
|
left: -50px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
}
|
|
@keyframes dancing-right{
|
|
0%{
|
|
right: -50px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
5%{
|
|
right: -40px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
10%{
|
|
right: -30px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
15%{
|
|
right: -20px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
20%{
|
|
right: -10px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
25%{
|
|
right: 0px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
30%{
|
|
right: 10px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
35%{
|
|
right: 20px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
40%{
|
|
right: 30px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
45%{
|
|
right: 40px;
|
|
top: 10px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
50%{
|
|
right: 50px;
|
|
top:0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
55%{
|
|
right: 40px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
60%{
|
|
right: 30px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
65%{
|
|
right: 20px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
70%{
|
|
right: 10px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
75%{
|
|
right: 0px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
80%{
|
|
right: -10px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
85%{
|
|
right: -20px;
|
|
top:10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
90%{
|
|
right: -30px;
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
95%{
|
|
right: -40px;
|
|
top: 10px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
100%{
|
|
right: -50px;
|
|
top: 0px;
|
|
transform:rotateY(180deg);
|
|
}
|
|
}
|
|
@keyframes dancing-down{
|
|
0%{
|
|
top: -20px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
25%{
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
40%{
|
|
top: -20px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
50%{
|
|
top: -100px;
|
|
transform:rotateY(720deg);
|
|
}
|
|
60%{
|
|
top: -20px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
75%{
|
|
top: 0px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
100%{
|
|
top: -20px;
|
|
transform:rotateY(0deg);
|
|
}
|
|
}
|
|
@keyframes dancing-Wobble{
|
|
from{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
10%{
|
|
transform:rotate(-20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
20%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
30%{
|
|
transform:rotate(-20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
40%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
50%{
|
|
transform:rotate(-20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
60%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
70%{
|
|
transform:rotate(-20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
80%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
90%{
|
|
transform:rotate(-20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
to{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
}
|
|
@keyframes dancing-Wobble-right{
|
|
from{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
10%{
|
|
transform:rotate(20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
20%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
30%{
|
|
transform:rotate(20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
40%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
50%{
|
|
transform:rotate(20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
60%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
70%{
|
|
transform:rotate(20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
80%{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
90%{
|
|
transform:rotate(20deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
to{
|
|
transform:rotate(0deg);
|
|
transform-origin:79px 108px;
|
|
}
|
|
}
|
|
@keyframes dancing-UP{
|
|
from{
|
|
transform:scale(1,1)
|
|
}
|
|
10%{
|
|
transform:scale(1.1,1.1)
|
|
}
|
|
20%{
|
|
transform:scale(1,1)
|
|
}
|
|
30%{
|
|
transform:scale(1.1,1.1)
|
|
}
|
|
40%{
|
|
transform:scale(1,1)
|
|
}
|
|
50%{
|
|
transform:scale(1.1,1.1)
|
|
}
|
|
60%{
|
|
transform:scale(1,1)
|
|
}
|
|
70%{
|
|
transform:scale(1.1,1.1)
|
|
}
|
|
80%{
|
|
transform:scale(1,1)
|
|
}
|
|
90%{
|
|
transform:scale(1.1,1.1)
|
|
}
|
|
100%{
|
|
transform:scale(1,1)
|
|
}
|
|
}
|
|
/*镜头拉近*/
|
|
|
|
|
|
@keyframes scale-left{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:0rem 18.75rem;
|
|
}
|
|
1%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:0rem 18.75rem;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:100% 18.75rem;
|
|
}
|
|
100%{
|
|
transform-origin:50% 50%;
|
|
transform: scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-right{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:100% 18.75rem;
|
|
}
|
|
1%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:100% 18.75rem;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:0 18.75rem;
|
|
}
|
|
100%{
|
|
transform-origin:0 18.75rem;
|
|
transform:scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-bottom-right{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:100% 43.75rem;
|
|
}
|
|
1%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:100% 43.75rem;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:0 43.75rem;
|
|
}
|
|
100%{
|
|
transform-origin:50% 50%;
|
|
transform: scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-bottom-left{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:0 43.75rem;
|
|
}
|
|
1%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:0 43.75rem;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:100% 43.75rem;
|
|
}
|
|
100%{
|
|
transform-origin:100% 43.75rem;
|
|
transform:scale(1,1);
|
|
}
|
|
}
|
|
/*荧光棒*/
|
|
@keyframes Wobble{
|
|
from{
|
|
transform:rotate(0deg);
|
|
transform-origin:22px 60px;
|
|
}
|
|
25%{
|
|
transform:rotate(30deg);
|
|
transform-origin:right bottom;
|
|
transform-origin:22px 60px;
|
|
}
|
|
50%{
|
|
transform:rotate(0deg);
|
|
transform-origin:right bottom;
|
|
transform-origin:22px 60px;
|
|
}
|
|
75%{
|
|
transform:rotate(-30deg);
|
|
transform-origin:right bottom;
|
|
transform-origin:22px 60px;
|
|
}
|
|
100%{
|
|
transform:rotate(0deg);
|
|
transform-origin:22px 60px;
|
|
}
|
|
}
|
|
@keyframes Wobble-big{
|
|
from{
|
|
transform:rotate(0deg);
|
|
transform-origin:36px 139px;
|
|
}
|
|
25%{
|
|
transform:rotate(30deg);
|
|
transform-origin:36px 139px;
|
|
}
|
|
50%{
|
|
transform:rotate(0deg);
|
|
transform-origin:36px 139px;
|
|
}
|
|
75%{
|
|
transform:rotate(-30deg);
|
|
transform-origin:36px 139px;
|
|
}
|
|
100%{
|
|
transform:rotate(0deg);
|
|
transform-origin:36px 139px;
|
|
}
|
|
}
|
|
@keyframes Wobble-big-tow{
|
|
from{
|
|
transform:rotate(0deg);
|
|
transform-origin:43px 120px;
|
|
}
|
|
25%{
|
|
transform:rotate(30deg);
|
|
transform-origin:43px 120px;
|
|
}
|
|
50%{
|
|
transform:rotate(0deg);
|
|
transform-origin:43px 120px;
|
|
}
|
|
75%{
|
|
transform:rotate(-30deg);
|
|
transform-origin:43px 120px;
|
|
}
|
|
100%{
|
|
transform:rotate(0deg);
|
|
transform-origin:43px 120px;
|
|
}
|
|
}
|
|
@keyframes stickgo{
|
|
0{
|
|
transform:translateY(0) rotate(0deg);
|
|
}
|
|
50%{
|
|
transform:translateY(-150px) rotate(1440deg);
|
|
}
|
|
100%{
|
|
transform:translateY(0) rotate(0deg);
|
|
}
|
|
}
|
|
@keyframes stickcome {
|
|
0% {
|
|
transform:translateX(0px) rotate(0deg);
|
|
}
|
|
1%{
|
|
transform:translateX(0px) rotate(70deg);
|
|
}
|
|
33% {
|
|
transform:translateX(350px) rotate(70deg);
|
|
}
|
|
66% {
|
|
transform:translateX(350px) rotate(610deg);
|
|
}
|
|
99% {
|
|
transform:translateX(0px) rotate(610deg);
|
|
}
|
|
100% {
|
|
transform:translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
/*烟花*/
|
|
@keyframes fireworks{
|
|
from{
|
|
display: none;
|
|
}
|
|
to{
|
|
display: block;
|
|
}
|
|
}
|