So erzielen Sie mit CSS einen animierten Effekt aus sich bewegenden Punkten-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-08-03 10:08:56

Original

3544 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

Zentriert:

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

Nach dem Login kopieren

Behältergröße definieren:

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

Nach dem Login kopieren

Zeichnen Sie einen Punkt:

.loader {
    position: relative;
}

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Anzahl der Bälle angeben:

.loader {
    --dots: 5;
}

Nach dem Login kopieren

Stellen Sie die Animationsverzögerung ein:

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

Nach dem Login kopieren

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

.loader {
    font-size: 20px;
}

Nach dem Login kopieren

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!