How to use CSS3 to achieve Cool loading load Animation Special effects
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!
