So erzielen Sie mit CSS einen animierten Effekt aus sich bewegenden Punkten

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS, um den Animationseffekt von beweglichen Punkten zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

Dom definieren, der Container enthält 5 Elemente, jedes Element stellt eine kleine Kugel dar:

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

Zentriert:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, sienna, maroon);
}

Behältergröße definieren:

.loader {
    width: 6em;
    height: 1em;
    font-size: 40px;
}

Zeichnen Sie einen Punkt:

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    left: 5em;
}

Definieren Sie die Bewegung des Balls von rechts nach links und von Der Animationseffekt des Die linke Seite kehrt zur rechten Seite zurück:

.loader {
    --duration: 5s;
}

.loader span {
    animation: 
        walk linear infinite;
    animation-duration: var(--duration);
}

@keyframes walk {
    0%, 95%, 100% {
        left: 5em;
    }

    80%, 85% {
        left: 0;
    }
}

Fügen Sie dann den Animationseffekt hinzu, bei dem der Ball am linken Ende hochspringt und am rechten Ende herunterfällt:

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite;
}

@keyframes jump {
    80%, 100% {
        top: 0;
    }

    85%, 95% {
        top: -1em;
    }
}

Fügen Sie den Ball am Ende hinzu Bei der Rückkehr von links nach rechts entsteht durch schnelle Bewegung der Effekt einer leichten Quetschung:

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite,
        squash linear infinite;
}

@keyframes squash {
    80%, 100% {
        width: 1em;
        height: 1em;
    }

    90% {
        width: 2em;
        height: 0.8em;
    }
}

Variablen für die 5 Bälle definieren:

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

Anzahl der Bälle angeben:

.loader {
    --dots: 5;
}

Stellen Sie die Animationsverzögerung ein:

.loader span {
    animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1);
}

Ändern Sie abschließend die Größe der Punkte, damit sie kleiner werden:

.loader {
    font-size: 20px;
}

Sie sind fertig!

Verwandte Empfehlungen:

So verwenden Sie CSS und D3, um den dynamischen Effekt eines Raumschiffs zu erzielen

So verwenden Sie CSS, um den dynamischen Effekt zu erzielen einer farbwechselnden Rotationsanimation

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen animierten Effekt aus sich bewegenden Punkten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!