Maison > interface Web > tutoriel CSS > Comment utiliser CSS et le mode de mélange de couleurs pour obtenir un effet d'animation de chargeur (code ci-joint)

Comment utiliser CSS et le mode de mélange de couleurs pour obtenir un effet d'animation de chargeur (code ci-joint)

不言
Libérer: 2018-08-22 10:25:20
original
2099 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser CSS et le mode de mélange de couleurs pour obtenir un effet d'animation de chargeur (avec du code). J'espère que ce sera le cas. utile pour vous.

Aperçu de l'effet

Comment utiliser CSS et le mode de mélange de couleurs pour obtenir un effet danimation de chargeur (code ci-joint)

Téléchargement du code source

https://github.com/comehope/front- fin-daily-challenges

Interprétation du code

Définir dom, 1 seul élément :

<div></div>
Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}
Copier après la connexion

Définir la taille du conteneur :

.loader {
    width: 30em;
    height: 3em;
    font-size: 10px;
}
Copier après la connexion

Utilisez des pseudo éléments pour dessiner 2 rectangles arrondis, occupant chacun la moitié de la largeur du conteneur, placez-les aux extrémités gauche et droite du conteneur, et coloriez-les respectivement :

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 50%;
    height: inherit;
    border-radius: 1em;
}

.loader::before {
    left: 0;
    background-color: dodgerblue;
}

.loader::after {
    right: 0;
    background-color: hotpink;
}
Copier après la connexion

Ajoutez le texte « chargement » au rectangle arrondi :

.loader::before,
.loader::after {
    content: 'loading';
    font-size: 2.5em;
    color: white;
    text-align: center;
    line-height: 1em;
}
Copier après la connexion

Ajoutez un effet d'animation :

.loader::before,
.loader::after {
    animation: 5s move ease-in-out infinite;
}

@keyframes move {
    50% {
        transform: translateX(100%);
    }
}
Copier après la connexion

Définissez les variables de direction de mouvement pour les deux rectangles arrondis afin qu'ils se déplacent par rapport l'un à l'autre :

.loader::before {
    --direction: 1;
}

.loader::after {
    --direction: -1;
}

@keyframes move {
    50% {
        transform: translateX(calc(100% * var(--direction)));
    }
}
Copier après la connexion

Enfin, réglez le mode de fusion pour que l'intersection des deux rectangles ne recouvre pas mais chevauche la couleur :

.loader::before,
.loader::after {
    mix-blend-mode: multiply;
}
Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser CSS pour implémenter un panda géant avec un chapeau (avec code)

Comment utiliser pure CSS pour l'implémenter Effet d'animation de survol de l'arrière-plan lors du changement de bouton

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal