Maison > Article > interface Web > Animation CSS3 (1) : 5 effets d'animation préchargés

Animation CSS3 (1) : 5 effets d'animation préchargés

高洛峰original: 2017-02-17 13:21:011962parcourir

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.
La mise en œuvre est comme indiqué dans la figure :

CSS3动画（一）：5种预载动画效果

Code HTML :

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

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

Animation préchargée 2 : Cercles entrelacés

Deux cercles se déplacent d'avant en arrière horizontalement. 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>

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

Préchargement de l'animation trois : cercle tournant

Effet :

CSS3动画（一）：5种预载动画效果

code html :

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

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

Précharger l'animation quatre : Sauter cercle

Il s'agit d'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>

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

Préchargez l'animation cinq : cercle radar

Un effet de rayonnement radar, définissez le même effet de fondu entrant et sortant pour 3 span elements, Ceci peut être réalisé avec un léger retard à chaque fois.
Effet :

CSS3动画（一）：5种预载动画效果

code html :

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

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

Plus d'animations CSS3 (1) : 5 effets d'animation préchargés Pour les articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée CSS3 : transformerArticle suivant：Explication détaillée CSS3 : transformer

Articles Liés

Voir plus