CSS Glowing Text Animation Effect
Animated neon text effect. Design source code HTML CSS.
Super
0
418
Below is the complete source code for the text design with animation.
For greater effect, text highlighting lights up in neon green.
HTML code CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proweblab</title>
</head>
<body>
<style>
body{
color: #111;
background-color: #000;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 5rem;
}
.container > span{
animation: glow 2s ease-in-out infinite;
}
@keyframes glow{
0%, 100%{
color: #fff;
text-shadow: 0 0 12px lime, 0 0 50px lime, 0 0 100px lime;
}
10%, 90%{
color: #111;
text-shadow: none;
}
}
.container > span:nth-child(2){
animation-delay: 0.25s;
}
.container > span:nth-child(3){
animation-delay: 0.5s;
}
.container > span:nth-child(4){
animation-delay: 0.75s;
}
.container > span:nth-child(5){
animation-delay: 1s;
}
.container > span:nth-child(6){
animation-delay: 1.25s;
}
.container > span:nth-child(7){
animation-delay: 1.5s;
}
.container > span:nth-child(8){
animation-delay: 1.75s;
}
.container > span:nth-child(9){
animation-delay: 2s;
}
.container > span:nth-child(2){
animation-delay: 2.25s;
}
</style>
<div class="container">
<span>P</span>
<span>R</span>
<span>O</span>
<span>W</span>
<span>E</span>
<span>B</span>
<span>L</span>
<span>A</span>
<span>B</span>
</div>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
