Comment utiliser CSS pour obtenir des effets dynamiques d'animation de rotation à changement de couleur

Cet article vous présente comment utiliser CSS pour obtenir l'effet dynamique d'une animation de rotation à changement de couleur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu de l'effet

Interprétation du code

Définir dom, conteneur Contient 9 éléments :

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Définir la taille du conteneur :

.container {
    width: 30em;
    height: 30em;
    font-size: 12px;
}

Définir le style des lignes dans le conteneur :

.container {
    color: lime;
}

.container span {
    position: absolute;
    width: 5em;
    height: 5em;
    border-style: solid;
    border-width: 1em 1em 0 0;
    border-color: currentColor transparent;
    border-radius: 50%;
}

Centrer la ligne dans le conteneur :

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Définir des variables pour étendre progressivement la ligne du centre vers l'extérieur :

.container span {
    --diameter: calc(5em + (var(--n) - 1) * 3em);
    width: var(--diameter);
    height: var(--diameter);
}

.container span:nth-child(1) {
    --n: 1;
}

.container span:nth-child(2) {
    --n: 2;
}

.container span:nth-child(3) {
    --n: 3;
}

.container span:nth-child(4) {
    --n: 4;
}

.container span:nth-child(5) {
    --n: 5;
}

.container span:nth-child(6) {
    --n: 6;
}

.container span:nth-child(7) {
    --n: 7;
}

.container span:nth-child(8) {
    --n: 8;
}

.container span:nth-child(9) {
    --n: 9;
}

Définir l'animation pour faire pivoter la ligne Effet :

.container span {
    animation: rotating linear infinite;
    animation-duration: calc(5s / (9 - var(--n) + 1));
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
    }
}

Définissez l'effet d'animation du changement de couleur, en prenant 360 degrés autour du cercle de teinte comme 100%, la variable --percent fait référence à la position de ce 100% :

@keyframes change-color {
    0%, 100% {
        --percent: 0;
    }

    10% {
        --percent: 10;
    }

    20% {
        --percent: 20;
    }

    30% {
        --percent: 30;
    }

    40% {
        --percent: 40;
    }

    50% {
        --percent: 50;
    }

    60% {
        --percent: 60;
    }

    70% {
        --percent: 70;
    }

    80% {
        --percent: 80;
    }

    90% {
        --percent: 90;
    }
}

Enfin, appliquez l'effet d'animation de changement de couleur au conteneur :

.container {
    --deg: calc(var(--percent) / 100 * 360deg);
    color: hsl(var(--deg), 100%, 50%);
    animation: change-color 5s linear infinite;
}

Vous avez terminé !

Articles connexes recommandés :

Comment utiliser CSS et D3 pour obtenir des effets dynamiques de vaisseaux spatiaux

Comment utiliser CSS et D3 pour atteindre six sans fin L'effet de l'espace de bord

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!