How to Create Latest CSS Glowing Text animation effects | Advance CSS Text Animation 2023

Kunjan Koiri
August 01, 2023
T h u n d e r

Latest CSS Glowing Text animation effects | Advance CSS Text Animation 2023

CSS GLOWING TEXT ANIMATION

Hi, guys welcome to another topic it will be different from previous posts. So just you need only basic and advanced CSS3. in the Last posts, we saw How to create Vertical Timeline Design Pure HTML5 CSS3 in Advanced. Now we will watch a vertical timeline design pure HTML5 CSS3 in Advanced.

Learn to design a Glowing Text Effect


Just start before, I just want to tell you that I haven’t completed design knowledge so; it will be some dirty. So let’s start to build a glowing text animation effect with CSS3.

I have given you a Video with source code to watch, which will help you to create an Awesome effect so will you understand how does it work.

Again I will teach you in some steps to easily understand what is it mean.

Steps:1 HTML Glowing Text Effect


We have a boilerplate using emmet if you are using VS Code, Sublime, Bracket, Atom,  etc.. in which already emmet build. 

I have used an internal CSS for this video purpose. i never suggest you to use internal CSS always create external STYLE.CSS file. Its a best pratices

Just come in body tag I’ve taken a div which class is container it will help to access of inside all span tag. Inside we’ve seven ‘SPAN’ tags with Seperate each Alphabate of THUNDER TEXT that’s it in HTML.

Steps:2 CSS design Tutorial


First of all universal operator in which margin and padding is zero and box-sizing is equal to border-box; in come to the body, width and height is to 100%, background-color is in form of RGB(14,13,13);

Now come to ‘.container’ element in which I get width,height, background-color, display, justify-content and align-items;

‘span’ element all ‘SPAN’ element now time to access text-transform, font-family, margin, font-size, color, animation;

And Now, create an animation which is very important to generate a animation... 

Now its that enough for CSS, when you get source code then you will see all the above element. 

Watch Video on Youtube : 


Source Code 👇👇

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
    <title>Thunder Effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100vw;
            height: 100vh;
            background-color: #34495e;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        span {
            text-transform: uppercase;
            font-family: 'Lato', sans-serif;
            margin: 15px;
            font-size: 80px;
            color: #7f8fa6;
            animation: thun 1.3s linear infinite;
        }

        @keyframes thun {
            0% {
                color: #7f8fa6;
                text-shadow: none;
            }

            90% {
                color: #7f8fa6;
                text-shadow: none;
            }

            100% {
                color: #f1c40f;
                text-shadow: 0 0 10px #d35400, 0px 0px 70px #d35400;
            }
        }

        span:nth-child(1) {
            animation-delay: 0s;
        }

        span:nth-child(2) {
            animation-delay: .1s;
        }

        span:nth-child(3) {
            animation-delay: .2s;
        }

        span:nth-child(4) {
            animation-delay: .3s;
        }

        span:nth-child(5) {
            animation-delay: .4s;
        }

        span:nth-child(6) {
            animation-delay: .5s;
        }

        span:nth-child(7) {
            animation-delay: .6s;
        }
    </style>
</head>

<body>
    <div class="container">
        <span>T</span>
        <span>h</span>
        <span>u</span>
        <span>n</span>
        <span>d</span>
        <span>e</span>
        <span>r</span>
    </div>
</body>

</html>