Flickering Text Effect Animation

I created Flickering Text Effect Animation using HTML & CSS. There are some simple steps that i followed to make it work. Used @keyframes keyword and adjusted it to my need. Also added some text-shadow so that i looks like it lightened.

Namaste!

I created Flickering Text Effect Animation using HTML & CSS. There are some simple steps that i followed to make it work.

Used @keyframes keyword and adjusted it to my need. Also added some text-shadow so that i looks like it lightened.

Let’s see a Demo and then see the code i used.

Flickering Text Effect Demo

Flickering Text Effect Source Code Free

Below code should be put into <body> Your Code Here </body>

.html file code

<h2>
        <span>I am </span>
        <span>MAll</span>
    </h2>

Put below code into <style> Your Code Here <style>

.css file code

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: rgb(5, 6, 20);
    user-select: none;
}
h2{
    color: #42230e;
    position: relative;
    font-size: 70px;
    text-transform: uppercase;
    cursor: pointer;
}
h2 span{
    animation: animate 5s linear infinite;
}
h2 span:nth-child(even){
    animation-delay: 0.4s;
}
@keyframes animate{
    0%,18%,20%,50.1%,60%,60.5%,80%,90.3%,93%{
        color: #42230e;
        text-shadow: none;
    }
    18.4%,20.1%,30%,50%,57%,100%{
       color: #fcfcfc;
       text-shadow: 0 0 10px #f4c803,
       0 0 20px #f4c803,
       0 0 40px #f4c803,
       0 0 80px #f4c803,
       0 0 150px #f4c803,
       0 0 350px #f4c803;
    }
}

Thank You!

Share your love
Default image
Neeraj Lamba
Articles: 38

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games learn about Operating systems and OS Structure Design
Secured By miniOrange