L'animation CSS3 implémente 5 effets d'animation de préchargement-tutoriel CSS-php.cn

L'animation CSS3 implémente 5 effets d'animation de préchargement

高洛峰

Libérer： 2017-03-22 14:51:51

original

2400 Les gens l'ont consulté

Obtenez l'effet d'animation comme indiqué sur l'image :
CSS3动画实现5种预载动画效果

Préchargez l'animation 1 : Double cercle rotatif

Un cercle tournant dans deux directions différentes. Nous définissons un code CSS pour la vitesse de la bague intérieure, c'est-à-dire que la vitesse de la bague intérieure est 2 fois plus rapide que celle de la bague extérieure.
L'implémentation est comme indiqué dans la figure :
CSS3动画实现5种预载动画效果
Code html :

<body style="background: #ffb83c;">
    <p id="preloader-1">
        <span></span>
        <span></span>
    </p>
</body>

Copier après la connexion

Code css :

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

Copier après la connexion

Préchargement de l'animation deux : échelonné cercle

Les deux cercles vont et viennent l'un sur l'autre. Chaque cercle possède son propre ensemble de paramètres d'animation de mouvement inverse.
Effet :
CSS3动画实现5种预载动画效果
code html :

<body style="background: #4ad3b4;">
    <p id="preloader-2">
        <span></span>
        <span></span>
    </p>
</body>

Copier après la connexion

code css :

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

Copier après la connexion

Précharger l'animation trois : cercle tournant

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

<body style="background: #ab69d9;">
    <p id="preloader-3">
        <span></span>
    </p>
</body>

Copier après la connexion

code css :

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

Copier après la connexion

Précharger l'animation quatre : cercle sautant

c'est un effet d'animation de motif de vagues mexicaines, obtenu en définissant les paramètres de retard entre différents cercles.
Effet :
CSS3动画实现5种预载动画效果
Code HTML :

<body style="background: #c1d64a;">
    <p id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

Copier après la connexion

Code CSS :

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

Copier après la connexion

Précharger l'animation cinq : cercle radar

Un effet de rayonnement radar, définissez le même effet de fondu d'entrée et de sortie pendant 3 span elementss, puis retardez légèrement chacun pour y parvenir.
Effet :
CSS3动画实现5种预载动画效果
code html :

<body style="background: #f9553f;">
    <p id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

Copier après la connexion

code css :

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

Copier après la connexion

Articles associés :

Comment utiliser HTML5 Canvas pour créer des effets d'animation 3D

Démonstration du code graphique de l'effet d'animation HTML5 Canvas

Analyse récapitulative de l'effet d'animation CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!