Learn How to Create a Text Writing Effect in HTML & CSS | Step-by-Step Tutorial

Enhance your web design skills with our step-by-step tutorial on creating a text writing effect in HTML and CSS. Impress your visitors with engaging text animations that will make your website stand out from the crowd.

admin admin
Mar 3, 2023 - 20:02
0 78

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Text Typing Animation</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
	<div class="loader">
		<span>L</span>
		<span>O</span>
		<span>A</span>
		<span>D</span>
		<span>I</span>
		<span>N</span>
		<span>G</span>
	</div>	

<style>
	.links{
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	.links a{
		margin-left: 10px;
		color: #fff;
		letter-spacing: 1px;
		font-size: 18px;
		text-decoration: none;
	}
	.links a:hover{
		color: #f3f3f3;
		text-decoration: underline;
	}
</style>
<div class="links">
	<a href="https://www.youtube.com/channel/UCB_7fGuHvxBuZuS8lJIlgww" target="_blank">Youtube</a>
	<a href="https://www.facebook.com/Nadeem.Akram035" target="_blank">Facebook</a>
	<a href="https://github.com/Nadeem035" target="_blank">GitHub</a>
</div>
</body>
</html>

CSS CODE

body{
	background: #2b2b2b;
	margin: 0;
	padding: 0;
}
.loader{
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}
.loader span{
	font-family: arial;
	font-size: 4em;
	color: rgba(255, 255, 255, .1);
	display: inline-block;
	transform: all .5;
	animation: animate 2s infinite;
}
@keyframes animate{
	0%{
		color: rgba(255,255,255,.1);
		transform: translateY(0);
		margin-left: 0;
	}
	25%{
		color: yellow;
		transform: translateY(-15);
		margin-left: 10px;
		text-shadow: 0 15px 5px rgba(0,0,0,1);
	}
	100%{
		color: rgba(255,255,255,.1);
		transform: translateY(0);
	
	}
}
.loader span:nth-child(1){
	animation-delay: .1s
}
.loader span:nth-child(2){
	animation-delay: .2s
}
.loader span:nth-child(3){
	animation-delay: .3s
}
.loader span:nth-child(4){
	animation-delay: .4s
}
.loader span:nth-child(5){
	animation-delay: .5s
}
.loader span:nth-child(6){
	animation-delay: .6s
}
.loader span:nth-child(7){
	animation-delay: .7s
}

Download complete code from GITHub Loading-Text Animation IN PURE CSS

To Watch More Video as Like these

Just Subscribe My Youtube Channel DarkCoders

and Hit The Bell Icon