So verwenden Sie CSS, um den Animationseffekt des Achterbahnladers zu realisieren

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zur Realisierung des Achterbahnlader-Animationseffekts. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

Codeinterpretation

Dom, Container definieren Enthält 3 Elemente, die 3 Punkte darstellen:

<p>
    <span></span>
    <span></span>
    <span></span>
</p>

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, silver, teal);
}

definiert den Durchmesser des Riesenrads, andere Längen verwenden diesen Wert als Grundskala:

.loader {
    --diameter: 10em;
}

Definieren Sie die Containergröße, die Breite beträgt das Zweifache der Höhe:

.loader {
    --width: calc(var(--diameter) * 2);
    width: var(--width);
    height: var(--diameter);
}

Definieren Sie die gemeinsamen Attribute des Pseudoelements:

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

Zeichnen Sie die untere Spur und definieren Sie eine Variable, die die Linienstärke darstellt :

.loader {
    --stroke-width: calc(var(--diameter) / 40);
    color: white;
}

.loader::before {
    width: inherit;
    height: var(--stroke-width);
    background-color: currentColor;
}

Zeichnen Sie eine kreisförmige Umlaufbahn in der Mitte:

.loader::after {
    box-sizing: border-box;
    width: var(--diameter);
    height: var(--diameter);
    border: var(--stroke-width) solid;
    border-radius: 50%;
    left: 25%;
}

Zeichnen Sie einen Punkt und definieren Sie eine Variable, die den Durchmesser des Punkts darstellt:

.loader {
    --dot-diameter: calc(var(--diameter) / 10);
}

.loader span {
    position: absolute;
    width: var(--dot-diameter);
    height: var(--dot-diameter);
    background-color: currentColor;
    border-radius: 50%;
    bottom: var(--stroke-width);
    left: calc((var(--width) - var(--dot-diameter)) / 2);
}

Für den Punktanimationseffekt hinzufügen der Drehung entlang einer kreisförmigen Umlaufbahn:

.loader span {
    animation:
        rotating 2s linear infinite;
    --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
    transform-origin: 50% var(--vertical-center);
}

@keyframes rotating {
    0%, 10% {
        transform: rotate(0deg);
    }

    60%, 100% {
        transform: rotate(-1turn);
    }
}

Fügen Sie den Punkten einen Bewegungsanimationseffekt hinzu:

.loader span {
    animation:
        run 2s linear infinite,
        rotating 2s linear infinite;
}

@keyframes run {
    0% {
        left: calc(var(--dot-diameter) * -1);
    }

    10%, 60% {
        left: calc((var(--width) - var(--dot-diameter)) / 2);
    }

    70%, 100% {
        left: calc(var(--width));
    }
}

Stellen Sie eine Animationsverzögerung für die anderen 2 Punkte ein, damit die 3 Punkte wie 3 Kutschen als nächstes aussehen zueinander:

.loader span:nth-child(1) {
    animation-delay: 0.075s;
}

.loader span:nth-child(2) {
    animation-delay: 0.15s;
}

Zum Schluss den Inhalt außerhalb des Containers ausblenden:

.loader {
    overflow: hidden;
}

Empfohlene verwandte Artikel:

CSS zum Implementieren der Navigationsumschaltung Codebeispiel

So verwenden Sie reines CSS, um einen Green Pig-Effekt zu erzielen

CSS3, um einen Effekt einer beweglichen Menüschaltfläche (Menü) zu erzielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um den Animationseffekt des Achterbahnladers zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!