SCSS
$color-fore:#fffe00;
$color-back:#303180;
$color-shad:#0081c2;
* {
box-sizing:border-box;
position:relative;
}
html {
font-size:10px;
}
body {
background:#00adef;
font-family:sans-serif;
font-size:100%;
text-align:center;
}
a {
color:#fff;
font-size:3vmin;
opacity:.5;
text-decoration:none;
}
a:hover {
opacity:1;
}
h1 {
animation:extrude 4s infinite step-end;
color:$color-fore;
display:block;
font:700 20vmin/1 "Yanone Kaffeesatz",sans-serif;
letter-spacing:1vmin;
margin:2vmin auto;
text-transform:uppercase;
text-shadow:0;
}
@for $i from 1 through 4 { // iterate the animation delays for each nth-child
h1:nth-of-type(#{$i}) {
animation-delay:1s + $i;
}
}
@keyframes extrude {
0% {
text-shadow:
1px 1px $color-back, // 3D extrusion
2px 2px $color-back,
3px 3px $color-back,
4px 4px $color-back,
5px 5px $color-back,
6px 6px $color-back,
7px 7px $color-back,
8px 8px $color-back,
9px 9px $color-back,
10px 10px $color-back,
10px 11px $color-shad, // shadow
8px 12px $color-shad,
6px 13px $color-shad,
4px 14px $color-shad,
2px 15px $color-shad,
0px 16px $color-shad,
-2px 17px $color-shad,
-4px 18px $color-shad,
-6px 19px $color-shad,
-8px 20px $color-shad,
-10px 21px $color-shad
;
}
25% {
text-shadow:none;
}
}
