Home >Web Front-end >CSS Tutorial >How to achieve page loading effect with CSS3
How to achieve page loading effect with CSS3
- 清浅Original
- 2018-11-29 13:54:174308browse
CSS3 method to achieve page loading effect: first create an HTML sample file; then create a div in the body; finally achieve the page loading effect through animation animation and 2D scaling conversion in transform.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
We can make the animation of page loading into different shapes. The case we want to share today is to make the animation into a circular shape to load the page. When using animation, we should pay attention to browser compatibility issues
Detailed explanation of knowledge points
(1) animation: Set animation properties
animation-name: Set the keyframe name that needs to be bound to the selector. This example is bound to load
animation-duration: the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function: animation speed curve.
animation-delay: The delay before the animation starts.
animation-iteration-count: The number of times the animation should be played.
animation-direction: Whether the animation should be played in reverse in turn.
Example: Set the animation name to load, the time required to complete the animation is 1.4s, start and end at low speed, and play in an infinite loop
animation: load 1.4s infinite ease-in-out;
(2) animation-fill-mode attribute
none: Do not change the default behavior.
forwards: When the animation is completed, keep the last attribute value (defined in the last keyframe).
backwards: During the period of time specified by animation-delay, the start property value (defined in the first keyframe) is applied before the animation is displayed.
both: Both forward and backward fill modes are applied.
(3) transform: scale(x,y) 2D scaling transformation.
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
margin:300px auto;
width: 150px;
text-align: center;
}
.load div{
width: 30px;
height: 30px;
background-color:rgb(118,224,250);
border-radius: 100%;
display: inline-block;
-webkit-animation: load 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
}
.load .circle1 {
-webkit-animation-delay: -0.32s;
}
.load .circle2 {
-webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</body>
</html>[Recommended course: CSS3 tutorial】
Rendering
Dynamic rendering
Summary: The above is That’s the entire content of this article. Through the content of this article, I hope you will have a certain understanding of CSS3 animation and be able to create your favorite page loading style.
The above is the detailed content of How to achieve page loading effect with CSS3. For more information, please follow other related articles on the PHP Chinese website!