Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
2047
<h1 contenteditable>2047</h1>
@mixin zebra-shadow($size, $colors) {
$text-shadow: ();
@for $i from 1 through length($colors) {
@for $j from 0 through $size {
$pos: (($i - 1) * $size + $j) * 1px;
$text-shadow: append(
$text-shadow,
$pos $pos nth($colors, $i),
'comma'
);
}
}
text-shadow: $text-shadow;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #0E0F33;
}
h1 {
font: bold 36vmin/1 'Cinzel', serif;
color: #fff;
animation:
text-shadow .75s linear infinite;
}
@keyframes text-shadow {
$red: #F40000;
$green: #28D58F;
$blue: #15007F;
$yellow: #FFBA00;
$pink: #FD138A;
from, 19.9% {
@include zebra-shadow(5, (
$blue, $pink, $yellow, $red, $green,
$blue, $pink, $yellow, $red, $green
));
}
20%, 39.9% {
@include zebra-shadow(5, (
$green, $blue, $pink, $yellow, $red,
$green, $blue, $pink, $yellow, $red
));
}
40%, 59.9% {
@include zebra-shadow(5, (
$red, $green, $blue, $pink, $yellow,
$red, $green, $blue, $pink, $yellow
));
}
60%, 79.9% {
@include zebra-shadow(5, (
$yellow, $red, $green, $blue, $pink,
$yellow, $red, $green, $blue, $pink,
));
}
80%, to {
@include zebra-shadow(5, (
$pink, $yellow, $red, $green, $blue,
$pink, $yellow, $red, $green, $blue
));
}
}
<link href="https://fonts.googleapis.com/css?family=Cinzel:900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment