mikurdi/glowing-text-animation-effects.markdown

## glowing-text-animation-effects.markdown

      
    Raw
  

              glowing-text-animation-effects.markdown
            
          
    Glowing Text Animation Effects

A Pen by Korver on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Glowing Text Animation Effects</title>
  <link href="http://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
</head>
<body>
  <h1>
    <span>S</span>
    <span>t</span>
    <span>u</span>
    <span>n</span>
    <span>n</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
  </h1>
</body>
</html>

## style.css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

h1 span {
  font-size: 10rem;
  font-family: 'Bad Script', cursive;
  color: #111;
  animation: glowing 2s linear infinite;
}

@keyframes glowing {
  0%, 100% {
    color: #fff;
    filter: blur(2px);
    text-shadow: 0 0 10px #00b3ff,
                 0 0 20px #00b3ff,
                 0 0 40px #00b3ff,
                 0 0 80px #00b3ff,
                 0 0 120px #00b3ff,
                 0 0 200px #00b3ff,
                 0 0 300px #00b3ff,
                 0 0 400px #00b3ff;
  } 5%, 95% {
    color: #111;
    text-shadow: none;
    filter: blur(0px);
  }
}

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;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Glowing Text Animation Effects</title>
	<link href="http://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
	</head>
	<body>
	<h1>
	<span>S</span>
	<span>t</span>
	<span>u</span>
	<span>n</span>
	<span>n</span>
	<span>i</span>
	<span>n</span>
	<span>g</span>
	</h1>
	</body>
	</html>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #000;
	}

	h1 span {
	font-size: 10rem;
	font-family: 'Bad Script', cursive;
	color: #111;
	animation: glowing 2s linear infinite;
	}

	@keyframes glowing {
	0%, 100% {
	color: #fff;
	filter: blur(2px);
	text-shadow: 0 0 10px #00b3ff,
	0 0 20px #00b3ff,
	0 0 40px #00b3ff,
	0 0 80px #00b3ff,
	0 0 120px #00b3ff,
	0 0 200px #00b3ff,
	0 0 300px #00b3ff,
	0 0 400px #00b3ff;
	} 5%, 95% {
	color: #111;
	text-shadow: none;
	filter: blur(0px);
	}
	}

	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;
	}