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

This article will explain in detail how to use pure CSS to achieve similar pulsation loader. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Code interpretation

Define the dom, and the container contains 10 child elements:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:linear-gradient (# eee70%,pink)

}

Style the container, which is a circle with a pink background and stroke:

.loader {

Width:6em

Height:6em

Padding:3em

Font-size:10px

Background-color:pink

Border-radius:50%

Border:0.8emsolidhotpink

}

Set the layout of the child elements to tile horizontally:

.loader {

Display:flex

Align-items:center

Justify-content:space-between

}

Style the child elements:

.loader > span {

Width:0.5em

Height:50%

Background-color:deeppink

}

Add animation effects for child elements:

.loader > span {

Transform:scaleY (0.05) translateX (- 0.5em)

Animation:span-animate1.5sinfiniteease-in-out

}

@ keyframesspan-animate {

0% 100% {

Transform:scaleY (0.05) translateX (- 0.5em)

}

15% {

Transform:scaleY (1.2) translateX (1em)

}

90% par 100% {

Background-color:hotpink

}

}

Set the subscript for the child elements to play the animation in turn:

.loader > span {

Animation-delay:calc (var (--n) * 0.05s)

}

.loader > span:nth-child (1) {--n _ rig _ 1;}

.loader > span:nth-child (2) {--n _ rig 2;}

.loader > span:nth-child (3) {--n _ lug _ 3;}

.loader > span:nth-child (4) {--n _ vir 4;}

.loader > span:nth-child (5) {--n _ lug _ 5;}

.loader > span:nth-child (6) {--n _ lug 6;}

.loader > span:nth-child (7) {--n _ rig 7;}

.loader > span:nth-child (8) {--n _ lug 8;}

.loader > span:nth-child (9) {--n _ lug 9;}

.loader > span:nth-child (10) {--n _ lug 10;}

Add container animation to enhance the pulsation effect:

.loader {

Animation:loader-animate1.5sinfiniteease-in-out

}

@ keyframesloader-animate {

45% par 55% {

Transform:scale (1.05)

}

}

This is the end of this article on "how to use pure CSS to achieve similar pulsation loader". 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, please share it out for more people to see.

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.