So verwenden Sie reines CSS, um einen pulsierenden Loader zu implementieren (Quellcode beigefügt)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-09-28 17:12:50

nach vorne

2552 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#eee 70%, pink);
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Legen Sie den Stil des untergeordneten Elements fest:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!