So verwenden Sie reines CSS, um einen pulsierenden Loader zu implementieren (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung eines pulsierenden Laders (Quellcode im Anhang). Ich hoffe, dass er hilfreich ist du hilfst.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 10 Unterelemente:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <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: linear-gradient(#eee 70%, pink);
}

Legen Sie den Stil des Containers fest , das rosa ist. Ein Kreis mit Hintergrund und Strich:

.loader {
    width: 6em;
    height: 6em;
    padding: 3em;
    font-size: 10px;
    background-color: pink;
    border-radius: 50%;
    border: 0.8em solid hotpink;
}

Stellen Sie den Layoutmodus des untergeordneten Elements auf horizontale Kachel ein:

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

Legen Sie den Stil des untergeordneten Elements fest:

.loader > span {
    width: 0.5em;
    height: 50%;
    background-color: deeppink;
}

Fügen Sie den Animationseffekt des untergeordneten Elements hinzu:

.loader > span {
    transform: scaleY(0.05) translateX(-0.5em);
    animation: span-animate 1.5s infinite ease-in-out;
}

@keyframes span-animate {
    0%, 100% {
        transform: scaleY(0.05) translateX(-0.5em);
    }
    15% {
        transform: scaleY(1.2) translateX(1em);
    }
    90%, 100% {
        background-color: hotpink;
    }
}

Legen Sie den Index des Unterelements fest und lassen Sie die Unterelemente die Animation nacheinander abspielen:

.loader > span {
    animation-delay: calc(var(--n) * 0.05s);
}

.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; }
.loader > span:nth-child(6) { --n: 6; }
.loader > span:nth-child(7) { --n: 7; }
.loader > span:nth-child(8) { --n: 8; }
.loader > span:nth-child(9) { --n: 9; }
.loader > span:nth-child(10) { --n: 10; }

Fügen Sie eine Containeranimation hinzu, um den pulsierenden Effekt zu verstärken :

.loader {
    animation: loader-animate 1.5s infinite ease-in-out;
}

@keyframes loader-animate {
    45%, 55% {
        transform: scale(1.05);
    }
}

Du bist fertig!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um einen pulsierenden Loader zu implementieren (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!