Hello, guys today we will learn How to make glowing text animation effects using HTML and CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glowing text animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="glowing_txt">
<h1>
<span>S</span>
<span>t</span>
<span>a</span>
<span>c</span>
<span>k</span>
<span>f</span>
<span>i</span>
<span>n</span>
<span>d</span>
<span>o</span>
<span>v</span>
<span>e</span>
<span>r</span>
</h1>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
font-family: 'Roboto', sans-serif;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000;
height: 100vh;
}
h1 {
margin: 0;
padding: 0;
color: #111;
font-size: 10em;
}
h1 span {
display: table-cell;
margin: 0;
padding: 0;
animation: animate 3s linear infinite;
}
h1 span:nth-child(1) {
animation-delay: 0s;
}
h1 span:nth-child(2) {
animation-delay: .25s;
}
h1 span:nth-child(3) {
animation-delay: .5s;
}
h1 span:nth-child(4) {
animation-delay: .75s;
}
h1 span:nth-child(5) {
animation-delay: 1s;
}
h1 span:nth-child(6) {
animation-delay: 1.25s;
}
h1 span:nth-child(7) {
animation-delay: 1.5s;
}
h1 span:nth-child(8) {
animation-delay: 1.75s;
}
h1 span:nth-child(9) {
animation-delay: 2s;
}
h1 span:nth-child(10) {
animation-delay: 2.25s;
}
h1 span:nth-child(11) {
animation-delay: 2.50s;
}
h1 span:nth-child(12) {
animation-delay: 2.75s;
}
h1 span:nth-child(13) {
animation-delay: 3s;
}
@keyframes animate {
0%, 100% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00a6fa,
0 0 20px #00a6fa,
0 0 40px #00a6fa,
0 0 60px #00a6fa,
0 0 80px #00a6fa,
0 0 100px #00a6fa,
0 0 120px #00a6fa,
0 0 140px #00a6fa,
0 0 160px #00a6fa,
0 0 180px #00a6fa,
0 0 200px #00a6fa;
}
5%, 95% {
color: #111;
filter: blur(0px);
text-shadow: none;
}
}