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>

 


Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz