Use pure css to achieve simple loading animation effect (code example)-CSS Tutorial-php.cn

Use pure css to achieve simple loading animation effect (code example)

青灯夜游

Release： 2021-03-22 10:03:06

forward

3020 people have browsed it

This article uses code examples to introduce how to use pure CSS to achieve a simple loading animation effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Use pure css to achieve simple loading animation effect (code example)

[Recommended tutorial: CSS video tutorial]

I saw that many websites currently use gif images for their loading effects, so I’m curious, how can I achieve this using just CSS? Good stuff is coming, please pick it up.

Difficulty factor

##☆☆☆☆

Rendering

Use pure css to achieve simple loading animation effect (code example)

Ideas

CSS is used to modify HTML, so even the simplest effects depend on HTML, and the HTML layout of the effect in this example is even more important. heavy.

Let’s first analyze the composition of the animation effect:

- The length of these lines The same, but the direction is different
- Each line does not run through the entire diameter, but is based on the radius

To sum up, we use the following steps to unlock the mystery of the loading effect step by step:

(1) Use HTML to realize the same lines distributed along a certain point , they form a circle

(2) Draw a small circle, add a background color, and cover it to the center of the line

(3) Add a gradient animation to change the transparency of the line

(4) By setting different animation delays for different lines, make the lines move

HTML

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

Copy after login

Analysis:

CSS

#container, #circle-center {
	background: grey;
}
#container {
	position: relative;
	width: 600px;
	height: 300px;
}
#circle-center {
	position: absolute;
	top: 100px;
	left: 250px;
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.load-line {
	position: absolute;
	top: 150px;
	left: 200px;
	width: 200px;
	height: 13px;
}
.load-line > span {
	display: inline-block;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Copy after login

Analysis:

All lines have the same size and have rounded corners
The rotation angles of lines along the same diameter direction are the same
The animation effect of all lines is the same (the transparency is changing) , the animation duration is the same, the animation delay starts from a certain line and increases one by one

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Use pure css to achieve simple loading animation effect (code example). For more information, please follow other related articles on the PHP Chinese website!