The background of this code is white and the colors of the texts are white. The letters are automatically shrinking and enlarging. As the letters enlarge, a gray shadow appears around the letters. This shadow disappears as the letters shrink. Because both the text and the background are white and the letters are visible by the shadow, there is a sense of appearance and disappearance of the letters.
HTML
<!-- This script got from www.devanswer.com -->
<div class="sudeep">
<span>d</span>
<span>e</span>
<span>v</span>
<span>a</span>
<span>n</span>
<span>s</span>
<span>w</span>
<span>e</span>
<span>r</span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body
{
background:aqua;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.sudeep
{
position: relative;
display: flex;
}
.sudeep span
{
color: #fff;
margin: 0 11px;
font-size: 4.3em;
font-weight: bold;
animation: animate 2.4s linear infinite;
font-family: sans-serif;
}
.sudeep span:nth-child(1)
{
animation-delay: 0s;
}
.sudeep span:nth-child(2)
{
animation-delay: 0.2s;
}
.sudeep span:nth-child(3)
{
animation-delay: 0.4s;
}
.sudeep span:nth-child(4)
{
animation-delay: 0.6s;
}
.sudeep span:nth-child(5)
{
animation-delay: 0.8s;
}
.sudeep span:nth-child(6)
{
animation-delay: 1s;
}
@keyframes animate
{
0%
{
text-shadow: 0 0 10px rgba(0,0,0,0);
transform: scale(1);
}
40%
{
text-shadow: 0 10px 20px rgba(0,0,0,0.2);
transform: scale(1.4);
}
80%,100%
{
text-shadow: 0 0 10px rgba(0,0,0,0);
transform: scale(1);
}
}
