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!
