Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-04 11:18:26
Original
2623 Leute haben es durchsucht

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

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

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>
Nach dem Login kopieren

Zentrierte Anzeige:

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

Definieren die Containergröße:

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

Zeichne 5 Schritte:

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

.loader span {
    width: 1em;
    height: 1em;
    background-color: white;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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);
    }
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
    }
}
Nach dem Login kopieren

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;
    }
}
Nach dem Login kopieren

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;
    }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!