init
This commit is contained in:
539943419 committed
commit
a02015cd73
945 files changed
+114143
No files matched your search
+308
@@ -0,0 +1,308 @@
|
||||
.effect-window {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition-timing-function: ease-in;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/*击杀特效*/
|
||||
.effect-window>.killer-warpper {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: calc(50% - 180px);
|
||||
width: 240px;
|
||||
height: 360px;
|
||||
animation-name: moveout-left-killer;
|
||||
animation-delay: 0.2s;
|
||||
animation-duration: 2.6s;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.effect-window>.killer-warpper::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -40%;
|
||||
top: -40%;
|
||||
width: 180%;
|
||||
height: 180%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("assets/image/shine.png");
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.effect-window>.killer-warpper>.killer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
/* filter: drop-shadow(0 0 30px yellow); */
|
||||
/* -webkit-filter: drop-shadow(0 0 30px yellow); */
|
||||
}
|
||||
|
||||
.effect-window>.victim {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: calc(50% - 135px);
|
||||
width: 180px;
|
||||
height: 270px;
|
||||
animation-name: moveout-left-victim;
|
||||
animation-delay: 0.2s;
|
||||
animation-duration: 2.6s;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.effect-window>.victim>div {
|
||||
filter: drop-shadow(0 0 3px black) grayscale(1);
|
||||
-webkit-filter: drop-shadow(0 0 3px black) grayscale(1);
|
||||
}
|
||||
|
||||
.effect-window>.victim>.back {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.effect-window>.victim>.back>.part1,
|
||||
.effect-window>.victim>.back>.part2 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
animation-delay: 1s;
|
||||
animation-duration: 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.effect-window>.victim>.back>.part1 {
|
||||
animation-name: split-part1;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 30%);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 30%);
|
||||
}
|
||||
|
||||
.effect-window>.victim>.back>.part2 {
|
||||
animation-name: split-part2;
|
||||
clip-path: polygon(0 30%, 100% 70%, 100% 100%, 0 100%);
|
||||
-webkit-clip-path: polygon(0 30%, 100% 70%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.effect-window>.victim>.rout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgb(70, 15, 15);
|
||||
font-size: 100px;
|
||||
font-family: xinwei;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px red;
|
||||
opacity: 0;
|
||||
animation: scale-rout 0.5s forwards;
|
||||
animation-delay: 0.5s;
|
||||
filter: none;
|
||||
-webkit-filter: none;
|
||||
}
|
||||
|
||||
.effect-window>.victim>.rout.shadow {
|
||||
animation: scale-rout-shadow 1s forwards;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.effect-window>.li {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: calc(50% - 5px);
|
||||
width: 300px;
|
||||
height: 10px;
|
||||
border-radius: 50% / 50%;
|
||||
background-image: radial-gradient(white, rgb(250, 250, 100));
|
||||
box-shadow: 0 0 10px rgb(250, 250, 100), 0 0 20px rgb(250, 250, 100), 0 0 30px rgb(250, 250, 100);
|
||||
filter: blur(1px);
|
||||
-webkit-filter: blur(1px);
|
||||
animation: moveout-left 0.4s forwards;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
|
||||
.effect-window>.li-big {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: calc(50% - 70px);
|
||||
width: 120%;
|
||||
height: 120px;
|
||||
background: linear-gradient(to right, white, white 70%, transparent);
|
||||
border-radius: 15% / 50%;
|
||||
filter: blur(10px) drop-shadow(0 0 50px yellow);
|
||||
-webkit-filter: blur(10px) drop-shadow(0 0 50px yellow);
|
||||
animation: moveout-left-li-big 0.8s linear forwards;
|
||||
}
|
||||
|
||||
.effect-window>.skill-name {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(50% + 150px + 15px);
|
||||
color: rgb(215, 234, 67);
|
||||
font-size: 60px;
|
||||
font-family: xingkai;
|
||||
text-shadow: 0 0 5px rgb(77, 60, 51), 0 0 4px rgb(77, 60, 51);
|
||||
transform: translateX(-50%);
|
||||
z-index: 99;
|
||||
animation: scale-skill-name 2.18s linear forwards;
|
||||
}
|
||||
|
||||
@keyframes moveout-left-killer {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
10% {
|
||||
left: calc(32% - 120px);
|
||||
}
|
||||
|
||||
60% {
|
||||
left: calc(32% - 120px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: calc(32% - 120px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveout-left-victim {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
6% {
|
||||
left: calc(67% - 90px);
|
||||
}
|
||||
|
||||
60% {
|
||||
left: calc(67% - 90px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: calc(67% - 90px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveout-left-li-big {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -120%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes split-part1 {
|
||||
0% {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes split-part2 {
|
||||
0% {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-rout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(8);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-rout-shadow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
transform: scale(1.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-skill-name {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(5);
|
||||
}
|
||||
|
||||
18% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(5);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(4.5);
|
||||
}
|
||||
|
||||
23% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
27% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
92% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user