CSS Animated Glowing Text.Today in this blog, we gonna learn about the CSS animated glowing text effect tutorial for Beginners.
CSS Animated Glowing Text Effect
Hi Friends!
Today in this blog, we gonna learn about the CSS animated glowing text effect tutorial for Beginners. text effects are important to make attractive websites. This animated glowing text effect is too easy to learn. in the previous blog, we will learn about CSS Glowing Button Effect For Beginners and this blog will help you understand about CSS glowing 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>G</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>I</span>
<span>N</span>
<span>G</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: transparent;
font-size: 100px;
font-weight: 800px;
font-family: sans-serif;
margin: 1px;
animation: anime 3s ease-in-out infinite;
}
@keyframes anime{
75%{
color: palevioletred;
transition-property: all;
transition-duration: 0.2s;
transform: translateY(100%);
}
100%{
color: palevioletred;
text-shadow: 1px 1px 20px #EC126CFF,
0px 0px 40px #EC126CFF;
}
}
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;
}
span:nth-child(7){
animation-delay: 1.4s;
}
]
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
Watch this video fully for your knowledge and repeat the code for your practice this practice will be motivated you to do different text effects with your own creativity. This video is helpful to learn effectively. animated glowing text effects are very useful in websites to attract people. I hope this tutorial will be helpful for learning text effects for beginners. I will give you Source Code and you can download it.
COMMENTS