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

This article focuses on "how to use CSS3 to achieve cool loading loading animation special effects", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use CSS3 to achieve cool loading load animation special effects"!

Installation

You can use bower to press this loading animation special effect:

Bower install loaders.css

Method of use

When using this loading to load animation effects, it is recommended to wrap the HTML elements needed in the effect in a container, and set the display of the package container to: display:flex. Take "eat beans" as an example:

The outer div.loader is the package element, and its display should be set to: display:flex.

CSS animation

Of the 5 empty div, the first one uses the div:first-of-type selector to select and make it into pacman, and the remaining four div use the nth-child selector to select and make "beans". Finally, use CSS3 keyframes animation to move the beans:

@-webkit-keyframes pacman-balls {

75% {

Opacity: 0.7;}

100% {

-webkit-transform: translate (- 100px,-6.25px)

Transform: translate (- 100px,-6.25px);}}

@ keyframes pacman-balls {

75% {

Opacity: 0.7;}

100% {

-webkit-transform: translate (- 100px,-6.25px)

Transform: translate (- 100px,-6.25px);}}

.pacman {

Position: relative;}

.pacman > div:nth-child (2) {

-webkit-animation: pacman-balls 1s 0s infinite linear

Animation: pacman-balls 1s 0s infinite linear;}

.pacman > div:nth-child (3) {

-webkit-animation: pacman-balls 1s 0.25s infinite linear

Animation: pacman-balls 1s 0.25s infinite linear;}

.pacman > div:nth-child (4) {

-webkit-animation: pacman-balls 1s 0.5s infinite linear

Animation: pacman-balls 1s 0.5s infinite linear;}

.pacman > div:nth-child (5) {

-webkit-animation: pacman-balls 1s 0.75s infinite linear

Animation: pacman-balls 1s 0.75s infinite linear;}

.pacman > div:first-of-type {

Width: 0px

Height: 0px

Border-right: 25px solid transparent

Border-top: 25px solid # fff

Border-left: 25px solid # fff

Border-bottom: 25px solid # fff

Border-radius: 25px

}

.pacman > div:nth-child (2), .pacman > div:nth-child (3), .pacman > div:nth-child (4), .pacman > div:nth-child (5) {

Background-color: # fff

Width: 15px

Height: 15px

Border-radius: 100%

Margin: 2px

Width: 10px

Height: 10px

Position: absolute

-webkit-transform: translate (0,-6.25px)

-ms-transform: translate (0,-6.25px)

Transform: translate (0,-6.25px)

Top: 25px

Left: 100px

}

At this point, I believe you have a deeper understanding of "how to use CSS3 to achieve cool loading load animation special effects", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.