How to create Glowing Text Animation Effects using HTML and CSS

Glowing Text Animation Effects

You may have seen different types of Glowing Text Animation Effects in many websites. There are many stylish Glowing Text Animation Effects on HTML and CSS. But today, I will show you as a Simple Glowing Text Animation Effects using HTML and CSS. This source code is really simple and easy to understand.

Glowing Text Animation Effects using HTML and CSS

This Glowing Text Animation Effects made with Only HTML & CSS. Copy source code from here.
For creating this project you have to create HTML File. Follow the steps to creating this without any error.

stunning.html or stunning.htm

Create an HTML file named ‘stunning.html‘ and put these codes given below.

stunning.css

Create an CSS file named ‘stunning.css‘ and put these codes given below.

/* Code By Coding With Fun */
@import url('https://fonts.googleapis.com/css?family=Bad Script');

body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #000;
	font-family: 'Bad Script', cursive;
}

h1 {
	margin: 0;
	padding: 0;
	color: #111;
	font-size: 10em;
}

h1 span {
	display: table-cell;
	margin: 0;
	padding: 0;
	animation: animate 2s linear infinite;
}

h1 span:nth-child(1) {
	animation-delay: 0s;
}

h1 span:nth-child(2) {
	animation-delay: 0.25s;
}

h1 span:nth-child(3) {
	animation-delay: 0.5s;
}

h1 span:nth-child(4) {
	animation-delay: 0.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;
}

@keyframes animate {
	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;
		filter: blur(0px);
		text-shadow: gone;
	}
}

That’s it. Now you have successfully create Glowing Text Animation Effects. If you have any doubt or question comment down below.

Deloge

I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

How to create Glowing Text Animation Effects using HTML and CSS

How to create Glowing Text Animation Effects using HTML and CSS

Glowing Text Animation Effects using HTML and CSS

Post a Comment

0 Comments

Popular Posts

How to create Pure CSS Neon Light Text Effect

How to create Sidebar Dashboard using Html and Css

How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS

Subscribe Us

Facebook

Labels

Pages

Search This Blog

Recent in Technology

How to create Glowing Text Animation Effects using HTML and CSS

How to create Glowing Text Animation Effects using HTML and CSS

Glowing Text Animation Effects using HTML and CSS

You may like these posts

Post a Comment

0 Comments

Social Plugin

Popular Posts

How to create Pure CSS Neon Light Text Effect

How to create Sidebar Dashboard using Html and Css

How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS

Subscribe Us

Facebook

Labels

Pages

Search This Blog

Recent in Technology