SCSS
$angle:45;
$distance:100;
$nbChars:7;
html,body{height:100%;}
body{
background-color: #2980b9;
color:white;
text-transform: uppercase;
font-family:'Helvetica Neue', arial, sans-serif;
font-weight:900;
font-size:90px;
}
div{
width:100%;
text-align: center;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
span{
display: inline-block;
position: relative;
animation: rise 3s infinite cubic-bezier(.55,0,.1,1);
z-index: 10;
@for $i from 1 through $nbChars{
&:nth-child(#{$i}){
animation-delay:#{0.15 * ($i - 1)}s;
z-index:$nbChars - $i;
}
}
}
}
@keyframes rise{
$angle: (180 - $angle) * pi() / 180;
$shadow:'';
@for $i from 1 through $distance{
$_x:(cos($angle) * $i);
$_y:(sin($angle) * $i);
$r:94 + ($distance - ($i * 1.8));
$g:124 + ($distance - ($i * 1.8));;
$b:139 + ($distance - ($i * 1.8));;
$color:rgba($r,$g,$b,1);
@if $i == $distance{
$shadow: $shadow + ($_x * 1px) ($_y * 1px) 0 $color;
}@else{
$shadow: $shadow + ($_x * 1px) ($_y * 1px) 0 $color ",";
}
}
0%{
transform:none;
}
50%{
$x:(cos($angle) * $distance);
$y:(sin($angle) * $distance);
transform:translate((-$x * 1px),(-$y * 1px));
text-shadow:$shadow;
}
}
