Amazing Loading in The Wind Animation With Pure CSS

 Amazing Loading in The Wind Animation With Pure CSS
Okunuyor Amazing Loading in The Wind Animation With Pure CSS

Today we talk about the Amazing Loading in The Wind Animation With Pure CSS. I hope this lesson is useful for you.

HTML

<div class="loading">
	<span>l</span>
	<span>o</span>
	<span>a</span>
	<span>d</span>
	<span>i</span>
	<span>n</span>
	<span>g</span>
	<span>.</span>
	<span>.</span>
	<span>.</span>
</div>	

CSS 1

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff);
	color: #fff;
	font-family: Averia Sans Libre, Fantasy;
}
. loading span {
	text-transform: uppercase;
	font-size: 4vw;
	font-weight: 600;
	opacity: 0;
	display: inline-black;
	padding: @em 0.5em;
	animation: letterWave 2s infinite linear;
}

CSS 2

.loading span:nth-child(0) {
	animation-delay: 0ms;
}
.loading span:nth-child(1) {
	animation-delay: 250ms;
}
.loading span:nth-child(2) {
	animation-delay: 500ms;
}
.loading span:nth-child(3) {
	animation-delay: 750ms;
}
.loading span:nth-child(4) {
	animation-delay: 1000ms;
}
.loading span:nth-child(5) {
	animation-delay: 1250ms;
}

CSS 3

.loading span:nth-child(6) {
	animation-delay: 1500ms;
}
.loading span:nth-child(7) {
	animation-delay: 1750ms;
}
.loading span:nth-child(8) {
	animation-delay: 2000ms;
}
.loading span:nth-child(9) {
	animation-delay: 2250ms;
}
.loading span:nth-child(10) {
	animation-delay: 25000ms;
}

CSS 4

@keyframes letterWave{
	0%,
	100% {
		transform: translateY(0) scale(1);
		padding: 0 0.5em;
		opacity: 0.8;
	}
	25% {
		transform: translateY(-lem) scale(0.8);
		padding: 0 0em;
		opacityL 0.6;
	}
	75% {
		transform: translateY(lem) scale(1.5);
		padding: 0 lem;
		opacity: l;
	}
}

Yapılan Yorumlar

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.