CSS Glowing Text Animation. Today in this blog, we gonna learn about the CSS Glowing Text Animation effect.
CSS Glowing Text Animation Effect
Hi Friends!
Today in this blog, we gonna learn about the CSS Glowing Text Animation effect. colourful glowing text animation is the best attractive part of the website. This Glowing Text Animation effect is simple to learn. in the previous blog, we will learn about CSS Glowing Border Effect for Beginners and this blog will help you to learn colour changing glowing text effect. and In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css animated glowing text effect</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<span>S</span>
<span>t</span>
<span>y</span>
<span>l</span>
<span>e</span>
<span>s</span>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
span{
color: coral;
font-size: 100px;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
animation: glow 2.5s ease-in-out infinite;
}
@keyframes glow{
0%{
filter: hue-rotate(90deg);
font-size: 200px;
}
50%{
filter: hue-rotate(360deg);
text-shadow: 1px 1px 20px #B200FFFF,
1px 1px 40px #B200FFFF,
1px 1px 60px #B200FFFF;
}
100%{
color: transparent;
}
}
span:nth-child(1){
animation-delay: 0.2s;
}
span:nth-child(2){
animation-delay: 0.4s;
}
span:nth-child(3){
animation-delay: 0.6s;
}
span:nth-child(4){
animation-delay: 0.8s;
}
span:nth-child(5){
animation-delay: 1s;
}span:nth-child(6){
animation-delay: 1.2s;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will you help to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
COMMENTS