So erzielen Sie mit reinem CSS einen Sanduhr-Animationseffekt-CSS-Tutorial-php.cn

So erzielen Sie mit reinem CSS einen Sanduhr-Animationseffekt

不言

Freigeben： 2018-08-27 09:37:23

Original

4762 Leute haben es durchsucht

Dieser Artikel enthält eine Seite zur Verwendung von CSS zur Überwachung des Netzwerkverbindungsstatus. Freunde in Not können darauf verweisen.

Effektvorschau

So erzielen Sie mit reinem CSS einen Sanduhr-Animationseffekt

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 2 Elemente, die jeweils die obere und untere Hälfte der Sanduhr darstellen:

<div>
    <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: gainsboro;
}

Nach dem Login kopieren

Definieren Sie die Containergröße und legen Sie das Gesamtlayout der untergeordneten Elemente fest:

.loader {
    width: 4.3em;
    height: 9.8em;
    font-size: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

Nach dem Login kopieren

Zeichnen Sie 2 Quadrate:

.top,
.bottom {
    width: 3.5em;
    height: 3.5em;
    border-style: solid;
    border-color: saddlebrown;
}

Nach dem Login kopieren

Verwenden Sie Ränder, abgerundete Ecken und Drehung, um die 2 Quadrate in eine Sanduhrform zu bringen :

.top,
.bottom {
    border-width: 0.2em 0.2em 0.6em 0.6em;
    border-radius: 50% 100% 50% 30%;
}

.top {
    transform: rotate(-45deg);
}

.bottom {
    transform: rotate(135deg);
}

Nach dem Login kopieren

Verwenden Sie Pseudoelemente, um Sand zu zeichnen. Die Oberseite des oberen Sandes ist ein großer Bogen und die Oberseite des unteren Sandes ist ein kleiner Bogen:

.top::before,
.bottom::before {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: deepskyblue;
}

.top::before {
    border-radius: 0 100% 0 0;
}

.bottom::before {
    border-radius: 0 0 0 35%;
}

Nach dem Login kopieren

Definieren Sie die Animationseigenschaften von der Sand:

.top::before,
.bottom::before {
    animation: 2s linear infinite;
}

Nach dem Login kopieren

Fügen Sie den Animationseffekt von Sand hinzu, der aus der oberen Hälfte der Sanduhr fällt:

.top::before {
    animation-name: drop-sand;
}

@keyframes drop-sand {
    to {
        transform: translate(-2.5em, 2.5em);
    }
}

Nach dem Login kopieren

Fügen Sie den Animationseffekt von Sand hinzu, der sich in der unteren Hälfte der Sanduhr anhäuft:

.bottom::before {
    transform: translate(2.5em, -2.5em);
    animation-name: fill-sand;
}

@keyframes fill-sand {
    to {
        transform: translate(0, 0);
    }
}

Nach dem Login kopieren

Verstecken Sie die obere Hälfte der Sanduhr und den Teil außerhalb der unteren Hälfte des Behälters. Zu diesem Zeitpunkt besteht der Überlagerungseffekt der beiden oben genannten Animationen darin, dass Sand aus der oberen Hälfte austritt und sich langsam in der unteren Hälfte ansammelt :

.top,
.bottom {
    overflow: hidden;
}

Nach dem Login kopieren

Erstellt mit dem Pseudoelement des äußeren Behälters. Ein schmaler Streifen, um fließenden Sand zu simulieren:

.loader::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 4.8em;
    background-color: deepskyblue;
    top: 1em;
}

Nach dem Login kopieren

Fügen Sie den Animationseffekt des Sandflusses hinzu:

.loader::after {
    animation: flow 2s linear infinite;
}

@keyframes flow {
    10%, 100% {
        transform: translateY(3.2em);
    }
}

Nach dem Login kopieren

Zum Schluss , füge die Flip-Animation der Sanduhr hinzu:

.loader {
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
    0%, 90% {
        transform: rotate(0);
    }
    
    100% {
        transform: rotate(0.5turn);
    }
}

Nach dem Login kopieren

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie CSS und D3 zum Implementieren einer Reihe von Laternen (mit Code)

So verwenden Sie reines CSS zum Implementieren eine rote Laterne Angry Birds (mit Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS einen Sanduhr-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!