CSS Glowing Text Animation Effect

Animated neon text effect. Design source code HTML CSS.

CSS Glowing Text Animation Effect
Animation Effect css

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>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.


Buy me a coffee