Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve preloaded animation effects in CSS3". Friends who are interested may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve preloaded animation effects with CSS3".

Preload animation 1: double circles

A circle that rotates in two different directions. We define a CSS code for the speed of the inner ring, that is, the speed of the inner ring is 2 times faster than that of the outer ring.

The implementation is shown in the figure:

Html Code:

Css Code:

# preloader-1 {position: relative;} # preloader-1 span {position: absolute; border:8px solid # fff; border-top:8px solid transparent; border-radius: 999px;} # preloader-1 span:nth-child (1) {width:80px; height: 80px; animation: spin-1 2s infinite linear;} # preloader-1 span:nth-child (2) {top:20px; left:20px; width:40px; height: 40px Animation: spin-2 1s infinite linear;} @ keyframes spin-1 {0% {transform: rotate (360deg); opacity: 1.0;} 50% {transform: rotate (180deg); opacity: 0.5;} 100% {transform: rotate (0deg); opacity: 0;} @ keyframes spin-2 {0% {transform: rotate (0deg); opacity: 0.5;} 50% {transform: rotate (180deg); opacity: 1;} 100% transform: rotate (360deg) Opacity: 0.5;}}

Preload animation II: staggered circles

The two circles move back and forth horizontally. Each circle has its own animation parameters for reverse movement.

Effect:

Html Code:

Css Code:

# preloader-2 {position: relative;} # preloader-2 span {position: absolute; width:30px; height: 30px; background: # fff; border-radius: 999px;} # preloader-2 span:nth-child (1) {animation: cross-1 1.5s infinite linear;} # preloader-2 span:nth-child (2) {animation: cross-2 1.5s infinite linear;} @ keyframes cross-1 {0% {transform: translateX (0); opacity: 0.5 50% {transform: translateX (80px); opacity: 1;} 100% {transform: translateX (0); opacity: 0.5;} @ keyframes cross-2 {0% {transform: translateX (80px); opacity: 0.5;} 50% {transform: translateX (0); opacity: 1;} 100% {transform: translateX (80px); opacity: 0.5;}}

Preload animation 3: rotating circle

Effect:

Html Code:

Css Code:

# preloader-3 {position: relative; width:80px; height:80px; border:4px solid rgba; border-radius: 999px;} # preloader-3 span {position: absolute; width:80px; height:80px; border:4px solid transparent; border-top:4px solid # fff; border-radius: 999px; top:-4px; left:-4px; animation: rotate 1s infinite linear } @ keyframes rotate {0% {transform: rotate (0deg);} 100% {transform: rotate (360deg);}}

Preload animation 4: jump circle

This is an animation of Mexican ripples, which is achieved by setting delay parameters between different circles.

Effect:

Html Code:

Css Code:

# preloader-4 {position: relative;} # preloader-4 span {position:absolute; width:16px; height: 16px; border-radius: 999px; background: # fff; animation: bounce 1s infinite linear;} # preloader-4 span:nth-child (1) {left:0; animation-delay: 0s;} # preloader-4 span:nth-child (2) {left:20px; animation-delay: 0.25s } # preloader-4 span:nth-child (3) {left:40px; animation-delay: 0.5s;} # preloader-4 span:nth-child (4) {left:60px; animation-delay: 0.75s;} # preloader-4 span:nth-child (5) {left:80px; animation-delay: 1.0s;} @ keyframes bounce {0% {transform: translateY (0px); opacity: 0.5;} 50% {transform: translateY (- 30px) Opacity: 1.0;} 100% {transform: translateY (0px); opacity: 0.5;}}

Preload animation 5: radar circle

A radar radiation effect that sets the same fade-in and fade-out effect to three span elements and can be achieved with a slight delay for each.

Effect:

Html Code:

Css Code:

# preloader-5 {position: relative;} # preloader-5 span {position:absolute; width:50px; height: 50px; border:5px solid # fff; border-radius: 999px; opacity: 0; animation: radar 2s infinite linear;} # preloader-5 span:nth-child (1) {animation-delay: 0s;} # preloader-5 span:nth-child (2) {animation-delay: 0.66s } # preloader-5 span:nth-child (3) {animation-delay: 1.33s;} @ keyframes radar {0% {transform: scale (0); opacity: 0;} 25% {transform: scale (0); opacity: 0.5;} 50% {transform: scale (1); opacity: 1.0;} 75% {transform: scale (1.5); opacity: 0.5;} 100% {transform: scale (2); opacity: 0 }} at this point, I believe you have a deeper understanding of "how to achieve preloaded animation effects in CSS3". You might as well do it in practice! 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.