Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.