<div class="flex-center">
<div>
<div class="flex">
<span>A</span>
<span>n</span>
<span>i</span>
<span>m</span>
<span>a</span>
<span>t</span>
<span>e</span>
<span>d</span>
</div>
<div class="flex">
<span>C</span>
<span>S</span>
<span>S</span>
</div>
<div class="flex">
<span>F</span>
<span>i</span>
<span>l</span>
<span>t</span>
<span>e</span>
<span>r</span>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
body {
color: #fff;
font-size: 8rem;
font-weight: 500;
font-family: 'Roboto Slab';
font-feature-settings: 'palt';
line-height: 1.25;
letter-spacing: 0.1em;
}
.flex-center {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(41,9,121,1) 0%, rgba(124,255,214,1) 100%);
background-size: contain;
background-repeat: no-repeat;
}
.flex {
display: flex;
}
span {
display: block;
text-shadow: 0 0 8px #fff;
animation-name: cross-fade-blur;
animation-duration: 4s;
animation-iteration-count: infinite;
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
animation-delay: $i * 0.04s;
}
}
}
@keyframes cross-fade-blur {
0% {
opacity: 0;
filter: blur(1rem);
transform: translate3d(0, 3rem, 0) rotate3d(0.25, -1, 0, 66.6deg);
}
20%,
60% {
opacity: 1;
filter: blur(0px);
transform: translate3d(0, 0, 0);
}
80%,
100% {
opacity: 0;
filter: blur(1rem);
transform: translate3d(0, -3rem, 0) rotate3d(-0.25, 1, 0, 66.6deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.