How to achieve page loading effect with CSS3-CSS Tutorial-php.cn

How to achieve page loading effect with CSS3

清浅

Release： 2021-04-20 15:13:38

Original

4290 people have browsed it

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.

How to achieve page loading effect with CSS3

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;

Copy after login

(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>

Copy after login

[Recommended course: CSS3 tutorial】

Rendering

How to achieve page loading effect with CSS3

Dynamic rendering

How to achieve page loading effect with CSS3

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!