Article Directory
written in front
Today, I am actually looking forward to the announcement of the results of the urban track in June, but it may be due to problems such as too many cities, and the official statistics are still in progress. I also took the opportunity to post another front-end article. In fact, in many systems We have all seen a variety of loading styles, but some of them seem ordinary. Today I counted 28 kinds of loading animation effects for you, hoping to meet your needs.
Knowledge points involved
CSS3 realizes multiple loading effects, pure CSS3 realizes various loading effects, pure CSS3 realizes 28 kinds of loading dynamic effects, page realizes loading effects, beautiful loading dynamic special effects, flexible application of animation and transform.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
Show results
In fact, this is to allow more people to choose whether to continue reading this article, and to accurately locate the demo you want for everyone. There is a download link for the complete code package at the end of the article.
1. The creation of the Loading node
When making this page, the first thing is to conceive. The normal demo is to take a dom node as an example. I choose the whole 4 as a representative, so it looks more comfortable.
First create four divs, and set the center display for the divs, where the dom nodes are as follows:
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
</div>
</div>
Each loader represents a loading effect of the loader, and the effect of setting a background color is as follows:
Then set the style in the white square, because the effect is different, so I use different class names to set different style attributes.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
2. Realization source code of some effects
1) Three-point loading animation
The setting of the animation property is mainly used, which is also a representative animation feature in CSS3. It can realize the time, reverse, and times of animation, and even support reverse animation.
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
The attributes are described as follows:
| value | illustrate |
|---|---|
| animation-name | Specifies the name of the keyframe to bind to the selector |
| animation-duration | The animation specifies how many seconds or milliseconds it takes to complete |
| animation-timing-function | Set how the animation will complete a cycle |
| animation-delay | Sets the delay interval before the animation starts. |
| animation-iteration-count | Defines how many times to play the animation. |
| animation-direction | Specifies whether the animation should be played in reverse in turn. |
| animation-fill-mode | Specifies the style to be applied to the element when the animation is not playing (when the animation is complete, or when there is a delay before the animation starts). |
| animation-play-state | Specifies whether the animation is running or paused. |
| initial | Sets the property to its default value. |
| you inherit | Inherit attributes from parent elements. |
In my example, the code I mainly set is as follows:
Html code
<div class="loader">
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS style code
.ball-pulse>div:nth-child(1) {
-webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div:nth-child(2) {
-webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div:nth-child(3) {
-webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
The effect after adding the style is as follows:
2) Dot matrix loading effect
In fact, this is a bit similar to the above. If the first one is one-dimensional, then it is two-dimensional. It is a square matrix formed by using 9 dots, and then formed by changing the size of each dot in different time periods. A dynamic loading effect for .
Html sets 9 sub-elements div. In terms of style, it mainly uses animation-duration of css to set the animation completion time of different nodes, animation-delay to set the delay interval and transform to set the zoom. The code looks like this:
Html code
<div class="loader">
<div class="loader-inner ball-grid-pulse">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS style code
@keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-grid-pulse {
width: 57px;
}
.ball-grid-pulse>div:nth-child(1) {
-webkit-animation-delay: -0.06s;
animation-delay: -0.06s;
-webkit-animation-duration: 0.72s;
animation-duration: 0.72s;
}
.ball-grid-pulse>div:nth-child(2) {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 1.02s;
animation-duration: 1.02s;
}
.ball-grid-pulse>div:nth-child(3) {
-webkit-animation-delay: -0.17s;
animation-delay: -0.17s;
-webkit-animation-duration: 1.28s;
animation-duration: 1.28s;
}
.ball-grid-pulse>div:nth-child(4) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
-webkit-animation-duration: 1.42s;
animation-duration: 1.42s;
}
.ball-grid-pulse>div:nth-child(5) {
-webkit-animation-delay: 0.31s;
animation-delay: 0.31s;
-webkit-animation-duration: 1.45s;
animation-duration: 1.45s;
}
.ball-grid-pulse>div:nth-child(6) {
-webkit-animation-delay: 0.03s;
animation-delay: 0.03s;
-webkit-animation-duration: 1.18s;
animation-duration: 1.18s;
}
.ball-grid-pulse>div:nth-child(7) {
-webkit-animation-delay: 0.46s;
animation-delay: 0.46s;
-webkit-animation-duration: 0.87s;
animation-duration: 0.87s;
}
.ball-grid-pulse>div:nth-child(8) {
-webkit-animation-delay: 0.78s;
animation-delay: 0.78s;
-webkit-animation-duration: 1.45s;
animation-duration: 1.45s;
}
.ball-grid-pulse>div:nth-child(9) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
-webkit-animation-duration: 1.06s;
animation-duration: 1.06s;
}
.ball-grid-pulse>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-pulse;
animation-name: ball-grid-pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0;
}
The page rendering effect is as follows:
3) Circular track loading animation
Compared with the previous two, this one is not so complicated. The effect can be completed with only one div. It mainly uses the animation-fill-mode and animation style settings, and sets the transform angle rotation animation rotate setting for the animation.
Html code
<div class="loader">
<div class="loader-inner ball-clip-rotate">
<div></div>
</div>
</div>
Css style code
.ball-clip-rotate>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid #fff;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite;
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
The page implementation effect is as follows:
4) Fence loading animation
In fact, this is an effect used by our company at this stage. It feels a bit like an accordion. Five small pillars are set in it, and then the high and low animations of these pillars are set to form a high and low loading animation.
Mainly the same as before, the core lies in the style setting of animation .
Html code
<div class="loader">
<div class="loader-inner line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Css style code
.line-scale>div:nth-child(1) {
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(2) {
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(3) {
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(4) {
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(5) {
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
The page effect is as follows:
3. Complete 28 ways to obtain special effects
-
Online disk download (the fourth chapter has a link path, you can download it by yourself)
-
Get a message (you can leave a message in the comment area of the blogger, remember to leave your email, and the blogger will send it out as soon as he sees it)
4. Source code download area
1) Baidu Netdisk
Link: https://pan.baidu.com/s/1OSRhPOxonxWDlGxAN_0U1g
Extraction code: hdd6
2) 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-V3I4.html
Extraction code: hdd6
3) Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces the application of CSS3 special effects. It mainly realizes CSS3 to achieve various loading effects. CSS3 realizes 28 kinds of loading dynamic effects, and the page realizes loading effects. Beautiful loading dynamic special effects. Let's make progress together, let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。