<main class="site__main">
<div>
<h1>
A lion <br />
does not <br />
ask permission <br />
before he <br />
eats a zebra <br />
</h1>
</div>
</main>
// #D92525 -- red
// #F25C05 -- orange
// #88A61B -- green
// #0E3D59 -- blue
// #572D8C -- purple
// $color: #D92525;
// $color2: #F25C05;
// $color3: #88A61B;
// $color4: #0E3D59;
// $color5: #572D8C;
// Grays
$color: #252526;
$color2: #313134;
$color3: #3e3e40;
$color4: #4a4a4d;
$color5: #575759;
body{
height:100hv;
background: #EDEEE9;
margin:0;
}
@function makelongshadow($color, $color2, $color3, $color4, $color5) {
$val: 0px 0px $color;
@for $i from 1 through 20 {
$val: #{$val}, -#{$i}px #{$i}px #{$color};
}
@for $i from 21 through 40 {
$val: #{$val}, -#{$i}px #{$i}px #{$color2};
}
@for $i from 41 through 60 {
$val: #{$val}, -#{$i}px #{$i}px #{$color3};
}
@for $i from 61 through 80 {
$val: #{$val}, -#{$i}px #{$i}px #{$color4};
}
@for $i from 81 through 100 {
$val: #{$val}, -#{$i}px #{$i}px #{$color5};
}
@return $val;
}
@keyframes animateShadow {
0% {
text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
}
20% {
text-shadow: makelongshadow($color2, $color3, $color4, $color5, $color);
}
40% {
text-shadow: makelongshadow($color3, $color4, $color5, $color, $color2);
}
60% {
text-shadow: makelongshadow($color4, $color5, $color, $color2, $color3);
}
80% {
text-shadow: makelongshadow($color5, $color, $color2, $color3, $color4);
}
100% {
text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
}
}
div {
padding : 40px;
overflow:hidden;
margin: 0px auto;
width: 50vw;
font-weight: 600;
line-height: 0.8;
font-size: 60px;
text-align: left;
font-size: 3rem;
color: #EDEEE9;
font-family: 'Georgia';
text-shadow: makelongshadow($color, $color2, $color3, $color4, $color5);
animation-name: animateShadow;
animation-duration: 1s;
animation-iteration-count: infinite;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.