How to realize the effect of page loading with CSS3
This article is about how CSS3 achieves the effect of page loading. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Explanation of knowledge points
(1) animation: set animation attributes
Animation-name: sets the keyframe name that needs to be bound to the selector. This example is bound to load
Animation-duration: the time in seconds or milliseconds it takes to complete the animation.
Animation-timing-function: the speed curve of the animation.
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 backwards in turn.
Example: the animation is called load. It takes 1.4s to complete the animation, starts and ends at a low speed, and plays it in an infinite loop.
Animation:load1.4sinfiniteease-in-out
(2) animation-fill-mode attribute
None: does not change the default behavior.
Forwards: maintains the last attribute value (defined in the last Keyframe) when the animation is complete.
Backwards: apply the start attribute value (defined in the first Keyframe) before the animation is displayed for a period of time specified by animation-delay.
Both: both forward and backward fill patterns are applied.
(3) transform:scale (XQuery y) 2D scaling conversion.
Complete code
Document
.load {
Margin:300pxauto
Width:150px
Text-align:center
}
.loaddiv {
Width:30px
Height:30px
Background-color:rgb (118224250)
Border-radius:100%
Display:inline-block
-webkit-animation:load1.4sinfiniteease-in-out
-webkit-animation-fill-mode:both
}
.load.circle1 {
-webkit-animation-delay:-0.32s
}
.load.circle2 {
-webkit-animation-delay:-0.16s
}
@-webkit-keyframesload {
0% webkit-transform:scale 80% Personal100% {- beacon (0.0)}
40% {- webkit-transform:scale}
}
Thank you for reading! On "CSS3 how to achieve page loading effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!
