mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-11-18 01:11:52 +00:00
84 lines
1.3 KiB
SCSS
84 lines
1.3 KiB
SCSS
//
|
|
// (TEXT) PARAMS
|
|
// =================
|
|
// 1. Namespace
|
|
// 2. Intensity
|
|
// 3. Text color
|
|
// 4. Background color (flat)
|
|
// 5. Highlight #1 color
|
|
// 6. Highlight #2 color
|
|
// 7. Width (px)
|
|
// 8. Height (px)
|
|
//
|
|
|
|
.glitch,
|
|
.glitch--hover:hover {
|
|
@include textGlitch("glitchText", 50, $color-bg-head, red, blue, 9999, 100);
|
|
}
|
|
|
|
|
|
.glitch:nth-child(2)::after,
|
|
.glitch--hover:hover:nth-child(2)::after,
|
|
.glitch:nth-child(2)::before,
|
|
.glitch--hover:hover:nth-child(2)::before {
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
.coverGlitch {
|
|
animation: coverTransform 2.5s steps(10) infinite, coverGlitch 3.2s infinite;
|
|
}
|
|
|
|
.coverGlitchSimpleHover:hover {
|
|
animation: coverGlitch 3.2s infinite;
|
|
}
|
|
|
|
.coverGlitch-svgFilter {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
}
|
|
|
|
@keyframes coverGlitch {
|
|
45% {
|
|
filter: none;
|
|
}
|
|
46% {
|
|
filter: url(#dist-01);
|
|
}
|
|
47% {
|
|
filter: url(#dist-02);
|
|
}
|
|
48% {
|
|
filter: url(#dist-03);
|
|
}
|
|
50% {
|
|
filter: none;
|
|
}
|
|
95% {
|
|
filter: none;
|
|
}
|
|
96% {
|
|
filter: url(#dist-02);
|
|
}
|
|
97% {
|
|
filter: url(#dist-04);
|
|
}
|
|
}
|
|
@keyframes coverTransform {
|
|
0% {
|
|
transform: translate(-1%, -1%) scale(1.005);
|
|
}
|
|
1% {
|
|
transform: none;
|
|
}
|
|
88% {
|
|
transform: none;
|
|
}
|
|
89% {
|
|
transform: translate(1%, 2%) scale(1.005);
|
|
}
|
|
90% {
|
|
transform: none;
|
|
}
|
|
}
|