- SOFTCODE - HTML CSS JAVASCRIPT Tips and Tricks

Description:

On this video tutorial create Wavy Text Animation in Html & CSS | CSS Animation Effects. Enjoy!

CSS Animation, CSS Effects, CSS Text, Animated Text, independence day, flag animation, wavy text, wavy animation, animation

Also Check out:

Flag Animation in Html & CSS | CSS Animation Effects:

https://www.youtube.com/watch?v=DlLCg1konCY

SOURCE CODE

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SIMPLE text animation in HTML CSS</title>
<link rel="stylesheet" href="./style.css">
<style>
	body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

ul{
	display: flex;
	list-style-type: none;
}

li{
	margin-right: 10px;
	font-family: poppins;
	font-size: 36px;
	font-weight: 1000;
	color: white;
	text-shadow: 0 0 7px #666;
	text-transform: uppercase;
	animation: text 1.5s linear infinite;
}

.red{
	color: orangered;
}

.green{
	color: lime;
}

ul li:nth-child(1){
	animation-delay: 0.1s
}
ul li:nth-child(2){
	animation-delay: 0.2s
}
ul li:nth-child(3){
	animation-delay: 0.3s
}
ul li:nth-child(4){
	animation-delay: 0.4s
}
ul li:nth-child(5){
	animation-delay: 0.5s
}
ul li:nth-child(6){
	animation-delay: 0.6s
}
ul li:nth-child(7){
	animation-delay: 0.7s
}
ul li:nth-child(8){
	animation-delay: 0.8s
}
ul li:nth-child(9){
	animation-delay: 0.9s
}
ul li:nth-child(10){
	animation-delay: 1s
}
ul li:nth-child(11){
	animation-delay: 1.1s
}
ul li:nth-child(12){
	animation-delay: 1.2s
}

@keyframes text {
	0%{
		scale: 1;
	}
	25%{
		scale: 3.5;
	}
	50%{
		scale: 1;
	}
}

</style>
</head>
<body>
	<ul>
		<li class="red">i</li>
		<li class="red">n</li>
		<li class="red">d</li>
		<li class="red">e</li>
		<li>p</li>
		<li>e</li>
		<li>n</li>
		<li>d</li>
		<li class="green">e</li>
		<li class="green">n</li>
		<li class="green">c</li>
		<li class="green">e</li>
		
	</ul>
</body>
</html>

SOFTCODE - HTML CSS JAVASCRIPT Tips and Tricks

No comments:

Notifications