SCSS
@import "compass/css3";
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: #333;
}
@mixin shade($type, $color: #3498db, $depth: 20, $angle: 135deg, $long: false, $fade: false) {
$angle: ($angle - 90);
$x: 1.5 * cos($angle) + 0px;
$y: 1.5 * sin($angle) + 0px;
$darken: (lightness($color)/$depth)/2;
$opacify: 0;
$shadow: ();
@if $long == true{
$darken:0;
}
@if $fade == true {
$opacify: (opacity($color)/$depth) ;
@include translateZ(0);
}
@for $i from 1 through $depth {
$shadow: $shadow, $i*$x $i*$y 0 hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify));
}
#{$type}-shadow: $shadow;
}
h1 {
animation: 10s shadow infinite;
color: #2ecc71;
font-family: 'Lato', sans-serif;
font-size: 11vw;
text-transform: uppercase;
text-align: center;
}
@keyframes shadow {
0%, 100% {
color: lighten(#2ecc71, 20%);
@include shade(text, #2ecc71, 50, 45deg);
transform: translate(0, 40px);
}
25% {
color: lighten(#e74c3c, 20%);
@include shade(text, #e74c3c, 50, 135deg);
transform: translate(0,-40px);
}
50% {
color: lighten(#e67e22, 20%);
@include shade(text, #e67e22, 50, 225deg);
transform: translate(60px,-40px);
}
75% {
color: lighten(#3498db, 20%);
@include shade(text, #3498db, 50, 315deg);
transform: translate(60px, 40px);
}
}
