CSS3 animation implements 5 preload animation effects-CSS Tutorial-php.cn

Table of Contents

Preload animation 1: Double rotating circle

Preload animation two: staggered circle

Preload animation three: rotating circle

Preload animation four: jumping circle

Preload animation five: radar circle

Home

Web Front-end

CSS Tutorial

CSS3 animation implements 5 preload animation effects

Mar 22, 2017 pm 02:51 PM

css3 animation

Achieve the animation effect as shown in the picture:
CSS3动画实现5种预载动画效果

Preload animation 1: Double rotating circle

A circle rotating 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:
CSS3动画实现5种预载动画效果
html code:

&lt;body style=&quot;background: #ffb83c;&quot;&gt;
    &lt;p id=&quot;preloader-1&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;/body&gt;

Copy after login

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;}
}

Copy after login

Preload animation two: staggered circle

The two circles move back and forth horizontally. Each circle has its own reverse movement animation parameters set.
Effect:
CSS3动画实现5种预载动画效果
html code:

&lt;body style=&quot;background: #4ad3b4;&quot;&gt;
    &lt;p id=&quot;preloader-2&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;/body&gt;

Copy after login

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;}
}

Copy after login

Preload animation three: rotating circle

Effect:
CSS3动画实现5种预载动画效果
html code:

&lt;body style=&quot;background: #ab69d9;&quot;&gt;
    &lt;p id=&quot;preloader-3&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;/body&gt;

Copy after login

css code:

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    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);}
}

Copy after login

Preload animation four: jumping circle

This is a Mexican wave pattern animation The effect is achieved by setting the delay parameters between different circles.
Effect:
CSS3动画实现5种预载动画效果
html code:

&lt;body style=&quot;background: #c1d64a;&quot;&gt;
    &lt;p id=&quot;preloader-4&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;/body&gt;

Copy after login

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;}
}

Copy after login

Preload animation five: radar circle

A kind of radar For the radiation effect, set the same fade-in and fade-out effect for three span elements, and then delay each one slightly to achieve it.
Effect:
CSS3动画实现5种预载动画效果
html code:

&lt;body style=&quot;background: #f9553f;&quot;&gt;
    &lt;p id=&quot;preloader-5&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;/body&gt;

Copy after login

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;}
}

Copy after login

How to use HTML5 Canvas produces 3D animation effects

HTML5 Canvas animation effect graphic code demonstration

css3 animation effect summary analysis

The above is the detailed content of CSS3 animation implements 5 preload animation effects. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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