So verwenden Sie CSS, um dynamische Effekte einer farbverändernden Rotationsanimation zu erzielen-CSS-Tutorial-php.cn

So verwenden Sie CSS, um dynamische Effekte einer farbverändernden Rotationsanimation zu erzielen

不言

Freigeben： 2018-08-02 10:58:01

Original

3232 Leute haben es durchsucht

Dieser Artikel stellt Ihnen vor, wie Sie mit CSS den dynamischen Effekt einer Farbwechsel-Rotationsanimation erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

So verwenden Sie CSS, um dynamische Effekte einer farbverändernden Rotationsanimation zu erzielen

Codeinterpretation

Dom, Container definieren Enthält 9 Elemente:

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

Nach dem Login kopieren

Zentrierte Darstellung:

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

Nach dem Login kopieren

Definieren Sie die Containergröße:

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

Nach dem Login kopieren

Legen Sie den Stil der Linien im Container fest:

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

Nach dem Login kopieren

Lassen Sie die Linien in der Mitte des Containers anzeigen:

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

Nach dem Login kopieren

Definieren Sie eine Variable, um die Linie schrittweise von der Mitte nach außen zu verlängern:

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

Nach dem Login kopieren

Stellen Sie den Animationseffekt so ein, dass die Linie gedreht wird:

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

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

Nach dem Login kopieren

Definieren Sie die Farbänderung. Der Animationseffekt basiert auf 360 Grad des Farbtonkreises als 100 %. Die Variable --percent bezieht sich auf die Position von 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;
    }
}

Nach dem Login kopieren

Zuletzt wenden Sie an Farbverändernder Animationseffekt für den Container:

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

Nach dem Login kopieren

Fertig!

Empfohlene verwandte Artikel:

So verwenden Sie CSS und D3, um dynamische Effekte von Raumschiffen zu erzielen

So verwenden Sie CSS und D3, um Erreiche endlose sechs Der Effekt des Randraums

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um dynamische Effekte einer farbverändernden Rotationsanimation zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!