5.1K
CSS glowing text animation effect using HTML and CSS
Welcome to you in techmidpoint tutorial. In this tutorial, I am going to make a CSS glowing text animation effect using HTML and CSS. When you run it you can see a slow increase glow from left to right. Just copy the given source code and paste it into your text editor and run it.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS glowing text animation effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="glowing">
<span>G</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</body>
</html>
CSS
body
{
margin: 0;
padding: 0;
background: #262626;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
font-family: Arial;
font-weight: bold;
}
.glowing span
{
color: #fff;
font-size: 1.5em;
color: #fff;
display: inline-block;
animation: animate 2s linear infinite;
width: 28px;
height: 28px;
text-align: center;
line-height: 28px;
border: 1px solid rgba(255,255,255,.4);
margin: 0 -2.5px;
}
@keyframes animate
{
0%
{
color: #f00;
box-shadow: 0 2px 10px rgba(255,0,0,1);
border: 1px solid rgba(255,0,0,1);
}
33.3%
{
color: #ff0;
box-shadow: 0 2px 10px rgba(255,255,0,1);
border: 1px solid rgba(255,255,0,1);
}
66.6%
{
color: #0f0;
box-shadow: 0 2px 10px rgba(0,255,0,1);
border: 1px solid rgba(0,255,0,1);
}
100%
{
color: #f00;
box-shadow: 0 2px 10px rgba(255,0,0,1);
border: 1px solid rgba(255,0,0,1);
}
}
.glowing span:nth-child(1)
{
animation-delay: 0s;
}
.glowing span:nth-child(2)
{
animation-delay: 0.1s;
}
.glowing span:nth-child(3)
{
animation-delay: 0.2s;
}
.glowing span:nth-child(4)
{
animation-delay: 0.3s;
}
.glowing span:nth-child(5)
{
animation-delay: 0.4s;
}
.glowing span:nth-child(6)
{
animation-delay: 0.5s;
}
.glowing span:nth-child(7)
{
animation-delay: 0.6s;
}
For More Tutorials Please Click Here
