Home » CSS glowing text animation effect using HTML and CSS

CSS glowing text animation effect using HTML and CSS

by techmidpoint
CSS glowing text animation effect using HTML and CSS

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

You may also like

Leave a Comment