So erzielen Sie mit reinem CSS den Animationseffekt von Ballsprungschritten (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt von Ballsprungschritten zu realisieren. Ich hoffe, dass er einen gewissen Referenzwert hat wird dir weiterhelfen. Du hast geholfen.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

Dom definieren, der Container enthält 5 Elemente, die 5 Schritte darstellen:

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

Zentrierte Anzeige:

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

Definieren die Containergröße:

.loader {
    width: 7em;
    height: 5em;
    font-size: 40px;
}

Zeichne 5 Schritte:

.loader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.loader span {
    width: 1em;
    height: 1em;
    background-color: white;
}

Verwende Variablen, um die 5 Schritte von niedrig nach hoch zu sortieren:

.loader span {
    height: calc(var(--n) * 1em);
}

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

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

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

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

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

Füge eine Transformationssortierrichtung für die Schrittanimation hinzu Effekt:

.loader span {
    animation: sort 5s infinite;
}

@keyframes sort {
    0%, 40%, 100% {
        height: calc(var(--n) * 1em);
    }

    50%, 90% {
        height: calc(5em - (var(--n) - 1) * 1em);
    }
}

Das Folgende ist eine Animation kleiner Kugeln, bei der eine Blending-Methode verwendet wird, um die abwechselnde Bewegung zweier kleiner Kugeln derselben Farbe so aussehen zu lassen, als würde eine kleine Kugel eine Hin- und Herbewegung ausführen.

Zeichnen Sie 2 kleine Bälle mit Pseudoelementen:

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

.loader::before {
    left: 0;
}

.loader::after {
    left: 6em;
}

Fügen Sie den Animationseffekt hinzu, damit sich der Ball nach oben bewegt:

.loader::before,
.loader::after {
    animation: climbing 5s infinite;
    visibility: hidden;
}

.loader::after {
    animation-delay: 2.5s;
}

@keyframes climbing {
    0% {
        bottom: 1em;
        visibility: visible;
    }

    10% {
        bottom: 2em;
    }

    20% {
        bottom: 3em;
    }

    30% {
        bottom: 4em;
    }

    40% {
        bottom: 5em;
    }

    50% {
        bottom: 1em;
    }

    50%, 100% {
        visibility: hidden;
    }
}

Bewegen Sie sich zu beiden Seiten, während Sie sich nach oben bewegen. Erstellen Sie die Animation Effekt des Treppensteigens:

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

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

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}

Fügen Sie zum Schluss noch einen anthropomorphen Effekt zur Aktion des Treppensteigens hinzu:

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    7% {
        bottom: calc(2em + 0.3em);
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    17% {
        bottom: calc(3em + 0.3em);
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    27% {
        bottom: calc(4em + 0.3em);
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    37% {
        bottom: calc(5em + 0.3em);
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um einen Animationseffekt eines rotierenden Fahrradrads zu erzielen

So verwenden Sie reines CSS, um einen zu erzielen Animation ähnlich einem fahnenschwenkenden Effekt (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Animationseffekt von Ballsprungschritten (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!