加了些特效
This commit is contained in:
539943419 committed
1 parent
dcac358d01
commit
190b30bbfe
6 files changed
+394
-4
No files matched your search
@@ -0,0 +1,304 @@
|
||||
$imgHeight: 180;
|
||||
|
||||
@function randomNum($max, $min: 0, $u: 1) {
|
||||
@return ($min + random($max)) * $u;
|
||||
}
|
||||
|
||||
@mixin leftAndClip {
|
||||
$height: randomNum(40, 20);
|
||||
$top: random($imgHeight - 10);
|
||||
$bottom: $imgHeight - $top - $height;
|
||||
clip-path: inset(#{$top}px 0 #{$bottom}px);
|
||||
left: #{randomNum(60, -20)}px;
|
||||
}
|
||||
|
||||
.avatar-glitch-style-miao {
|
||||
animation: main-img-hide 8s infinite step-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-glitch-style-miao::before,
|
||||
.avatar-glitch-style-miao::after {
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.avatar-glitch-style-miao::after {
|
||||
content: "";
|
||||
animation: glitch-one 8s infinite step-end;
|
||||
}
|
||||
|
||||
.avatar-glitch-style-miao::before {
|
||||
content: "";
|
||||
animation: glitch-two 8s infinite 1s step-end;
|
||||
}
|
||||
|
||||
.player.dead>.avatar-glitch-style-miao {
|
||||
filter: grayscale(1) !important;
|
||||
-webkit-filter: grayscale(1);
|
||||
}
|
||||
|
||||
@keyframes glitch-one {
|
||||
@for $i from 0 to 100 {
|
||||
#{$i}% {
|
||||
@include leftAndClip;
|
||||
}
|
||||
}
|
||||
|
||||
15.5% {
|
||||
clip-path: inset(10px 0 320px);
|
||||
left: -20px;
|
||||
}
|
||||
16% {
|
||||
clip-path: inset(10px 0 320px);
|
||||
left: -10px;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.5;
|
||||
left: -20px;
|
||||
filter: hue-rotate(90deg) saturate(1.3);
|
||||
}
|
||||
45.5% {
|
||||
left: 0px;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
46% {
|
||||
clip-path: inset(150px 0 160px);
|
||||
left: 15%;
|
||||
}
|
||||
46.5% {
|
||||
clip-path: inset(20px 0 200px);
|
||||
left: -10%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
47% {
|
||||
clip-path: inset(240px 0 20px);
|
||||
left: -11%;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
47.5% {
|
||||
clip-path: inset(20 0 20px);
|
||||
left: 13%;
|
||||
transform: scale(1.3);
|
||||
filter: invert(0);
|
||||
}
|
||||
48% {
|
||||
clip-path: inset(120 0 120px);
|
||||
left: 15%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
48.5% {
|
||||
clip-path: inset(260px 0 10px);
|
||||
left: -11%;
|
||||
transform: scale(1.2);
|
||||
filter: none;
|
||||
}
|
||||
49% {
|
||||
clip-path: inset(5px 0 350px);
|
||||
left: 11%;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
49.5% {
|
||||
clip-path: inset(105px 0 210px);
|
||||
left: 0%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
clip-path: inset(175px 0 160px);
|
||||
left: -11%;
|
||||
}
|
||||
50.5% {
|
||||
clip-path: inset(95px 0 230px);
|
||||
left: -14%;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
51% {
|
||||
clip-path: inset(235px 0 12px);
|
||||
left: -14%;
|
||||
}
|
||||
51.5% {
|
||||
clip-path: inset(350px 0 7px);
|
||||
left: -14%;
|
||||
}
|
||||
52% {
|
||||
clip-path: inset(320px 0 27px);
|
||||
left: -12%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
52.5% {
|
||||
clip-path: inset(190px 0 127px);
|
||||
left: -11%;
|
||||
transform: scale(1.3);
|
||||
filter: hue-rotate(90deg) saturate(1.3);
|
||||
}
|
||||
54% {
|
||||
clip-path: inset(20px 0 20px);
|
||||
left: 12%;
|
||||
transform: scale(1.1);
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-two {
|
||||
@for $i from 0 to 100 {
|
||||
#{$i}% {
|
||||
@include leftAndClip;
|
||||
}
|
||||
}
|
||||
|
||||
25.5% {
|
||||
clip-path: inset(10px 0 320px);
|
||||
left: -20px;
|
||||
}
|
||||
26% {
|
||||
clip-path: inset(10px 0 320px);
|
||||
left: -10px;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.3;
|
||||
left: -20px;
|
||||
filter: hue-rotate(45deg) saturate(1.1);
|
||||
}
|
||||
45.5% {
|
||||
left: 0px;
|
||||
filter: invert(1.2);
|
||||
}
|
||||
|
||||
46% {
|
||||
clip-path: inset(50px 0 260px);
|
||||
left: -12%;
|
||||
}
|
||||
46.5% {
|
||||
clip-path: inset(120px 0 100px);
|
||||
left: 8%;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
47% {
|
||||
clip-path: inset(40px 0 300px);
|
||||
left: 8%;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
47.5% {
|
||||
clip-path: inset(220 0 70px);
|
||||
left: -9%;
|
||||
transform: scale(1.1);
|
||||
filter: invert(1.1);
|
||||
}
|
||||
48% {
|
||||
clip-path: inset(240px 0 120px);
|
||||
left: 11%;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
48.5% {
|
||||
clip-path: inset(0px 0 310px);
|
||||
left: -12%;
|
||||
transform: scale(1.2);
|
||||
filter: none;
|
||||
}
|
||||
49% {
|
||||
clip-path: inset(255px 0 50px);
|
||||
left: 11%;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
49.5% {
|
||||
clip-path: inset(10px 0 240px);
|
||||
left: 6%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
clip-path: inset(275px 0 90px);
|
||||
left: -12%;
|
||||
}
|
||||
50.5% {
|
||||
clip-path: inset(195px 0 90px);
|
||||
left: 14%;
|
||||
transform: scale(1.4);
|
||||
}
|
||||
51% {
|
||||
clip-path: inset(35px 0 282px);
|
||||
left: -14%;
|
||||
}
|
||||
51.5% {
|
||||
clip-path: inset(350px 0 7px);
|
||||
left: 14%;
|
||||
}
|
||||
52% {
|
||||
clip-path: inset(20px 0 270px);
|
||||
left: -12%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
52.5% {
|
||||
clip-path: inset(90px 0 227px);
|
||||
left: -11%;
|
||||
transform: scale(1.3);
|
||||
filter: hue-rotate(150deg) saturate(1.3);
|
||||
}
|
||||
54% {
|
||||
clip-path: inset(220px 0 100px);
|
||||
left: 12%;
|
||||
transform: scale(1.1);
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
@keyframes main-img-hide {
|
||||
5% {
|
||||
filter: invert(1);
|
||||
}
|
||||
5.2% {
|
||||
filter: none;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
11% {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
46% {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
53.5% {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
54% {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
54.5% {
|
||||
opacity: 0.5;
|
||||
filter: hue-rotate(30deg);
|
||||
}
|
||||
55% {
|
||||
filter: none;
|
||||
}
|
||||
55.5% {
|
||||
opacity: 1;
|
||||
}
|
||||
56% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
56.5% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
57% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
58% {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user