602 lines
8.1 KiB
CSS
602 lines
8.1 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(.9);
|
|
}
|
|
100%{
|
|
transform: scale(.91);
|
|
}
|
|
}
|
|
@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:left 90%;
|
|
}
|
|
10%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:left 90%;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:right 90%;
|
|
}
|
|
100%{
|
|
transform-origin:right 90%;
|
|
transform:scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-right{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:right 90%;
|
|
}
|
|
10%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:right 90%;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:left 90%;
|
|
}
|
|
100%{
|
|
transform-origin:left 90%;
|
|
transform:scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-bottom-right{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:right 200%;
|
|
}
|
|
10%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:right 200%;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:left 200%;
|
|
}
|
|
100%{
|
|
transform-origin:left 200%;
|
|
transform:scale(1,1);
|
|
}
|
|
}
|
|
@keyframes scale-bottom-left{
|
|
0{
|
|
transform:scale(1,1);
|
|
transform-origin:left 200%;
|
|
}
|
|
10%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:left 200%;
|
|
}
|
|
90%{
|
|
transform:scale(1.4,1.4);
|
|
transform-origin:right 200%;
|
|
}
|
|
100%{
|
|
transform-origin:right 200%;
|
|
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 run-right-bottom{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(300px,100px);
|
|
}
|
|
}
|
|
@keyframes run-left-bottom{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(-300px,100px);
|
|
}
|
|
}
|
|
@keyframes run-right-top{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(300px,-100px);
|
|
}
|
|
}
|
|
@keyframes run-left-top{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(-300px,-100px);
|
|
}
|
|
}
|
|
@keyframes run-right{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(300px,0);
|
|
}
|
|
}
|
|
@keyframes run-left{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(-300px,0);
|
|
}
|
|
}
|
|
@keyframes run-top{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(0px,-100px);
|
|
}
|
|
}
|
|
@keyframes run-bottom{
|
|
from{
|
|
transform:translate(0,0);
|
|
}
|
|
to{
|
|
transform:translate(0px,100px);
|
|
}
|
|
} |