Home > Article > Web Front-end > How to achieve page loading effect with CSS3

How to achieve page loading effect with CSS3

清浅Original: 2018-11-29 13:54:174265browse

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

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!

html5 css3 html count 循环 function 选择器 transform animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the use of focus selector in cssNext article：What is the use of focus selector in css

See more

How to achieve page loading effect with CSS3

Related articles