How to create Glowing CSS Tubelight text effects animation using HTML, and CSS?
First you need to take two files named index.html and style.css. We’ll link style.css to index.html. Then we have to take the text or text on which we will create the Tubelight text effects animation. For example-
<h2>Tube Light Effect</h2>
Take such a tag and take the text we like in it. Then I will take a contenteditable=”true” attribute inside the h2 tag. Our tag and text will look like this:- <h2 contenteditable=”true”>Tube Light Effect</h2>
Then we’ll move on to our style.css file. After going to style.css file we need to write some style code. First we will write these codes in the css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
By writing the above codes, all types of Default margin, padding will be removed from the body of our browser. Then we will give a background color to the entire body and use css flex-box to center all the content inside the body. Code:-
body{
display: flex;
justify-content: center;
align-items: center;
background: #07252d;
min-height: 100vh;
}
By doing this the Output will be like this:-
Now our main task is to create the main animation effect using @keyframe. That’s why we have to css by holding the h2 tag taken in HTML. Our css code will be like this:-
h2{
position: relative;
font-size: 6em;
letter-spacing: 10px;
color: #0e3742;
text-transform: uppercase;
width: 100%;
text-align: center;
-webkit-box-reflect: below 1px linear-gradient(transparent, #000008);
line-height: .7em;
outline: none;
animation: animate 5s linear infinite;
}
Once the above codes are written, we will need to write some code for when to show an animation in @keyframe.
@keyframes animate {
0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{
color: #0e3742;
text-shadow: none;
}
18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{
color: #fff;
text-shadow: 0 0 10px #03bcf4,
0 0 20px #03bcf4,
0 0 40px #03bcf4,
0 0 80px #03bcf4,
0 0 160px #03bcf4;
}
}
After writing the codes, we will go to our browser and check the output. If everything is correct, our output will come like this.
If anyone has difficulty understanding this post, comment or watch the video to understand the whole thing better.