decadeUI-Miao/effect.css

.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);
	}
}