Effets d'animation de chargement CSS3 super cool-tutoriel CSS-php.cn

Effets d'animation de chargement CSS3 super cool

黄舟

Libérer： 2017-01-19 14:05:57

original

1986 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un effet d'animation de chargement CSS3 sympa. L'animation de chargement est réalisée à l'aide de l'animation CSS3 CSS3. Le code est simple et l'effet est très cool.

Utilisation

Structure HTML

Utilisez un élément

comme conteneur de l'animation de chargement, qui a deux éléments enfants. Parmi eux, div.loading-1 est la barre de progression du chargement. div.loading-2 est le texte de chargement.

<div class="loader">
    <div class="loading-1"></div>
    <div class="loading-2">Loading...</div>
</div>

Copier après la connexion

Style CSS

Trois animations sont utilisées dans cette animation de chargement La première animation de chargement est utilisée pour déplacer la barre de progression de 0 à 100%. L'animation du deuxième tour est utilisée pour faire pivoter la barre de progression dans la direction de l'axe Y. La troisième animation de rebond est utilisée pour le rebond du texte.

.loader {
    width: 150px;
    margin: 50px auto 70px;
    position: relative;
}
.loader .loading-1 {
    position: relative;
    width: 100%;
    height: 10px;
    border: 1px solid #69d2e7;
    border-radius: 10px;
    animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
    content: "";
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: #69d2e7;
    box-shadow: 10px 0px 15px 0px #69d2e7;
    animation: load 2s linear infinite;
}
.loader .loading-2 {
    width: 100%;
    position: absolute;
    top: 10px;
    color: #69d2e7;
    font-size: 22px;
    text-align: center;
    animation: bounce 2s  linear infinite;
}
@keyframes load {
    0% {
        width: 0%;
    }
    87.5%, 100% {
        width: 100%;
    }
}
@keyframes turn {
    0% {
        transform: rotateY(0deg);
    }
    6.25%, 50% {
        transform: rotateY(180deg);
    }
    56.25%, 100% {
        transform: rotateY(360deg);
    }
}
@keyframes bounce {
    0%,100% {
        top: 10px;
    }
    12.5% {
        top: 30px;
    }
}

Copier après la connexion

Ce qui précède est le contenu des effets spéciaux d'animation de chargement CSS3 super cool. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !