So verwenden Sie reines CSS, um ein wanderndes Gelee-Monster zu implementieren (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um das wandernde Gelee-Monster zu realisieren. Ich hoffe, dass es für Sie hilfreich ist.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 2 Elemente, die jeweils den Körper und die Augen des Monsters darstellen:

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

Hintergrundfarbe festlegen:

body {
    margin: 0;
    height: 100vh;
    background-color: black;
}

Einstellen Vordergrundfarbe:

.monster {
    width: 100vw;
    height: 50vh;
    background-color: lightcyan;
}

Zeichne den Körper des Monsters:

.monster {
    position: relative;
}

.body {
    position: absolute;
    width: 32vmin;
    height: 32vmin;
    background-color: teal;
    border-radius: 43% 40% 43% 40%;
    bottom: calc(-1 * 32vmin / 2 - 4vmin);
}

Definiere den Behälter, in dem sich die Augen des Monsters befinden:

.eyes {
    width: 24vmin;
    height: 5vmin;
    position: absolute;
    bottom: 2vmin;
    left: calc(32vmin - 24vmin - 2vmin);
}

Zeichne die Augen des Monsters mit Pseudoelementen:

.eyes::before,
.eyes::after {
    content: '';
    position: absolute;
    width: 5vmin;
    height: 5vmin;
    border: 1.25vmin solid white;
    box-sizing: border-box;
    border-radius: 50%;
}

.eyes::before {
    left: 4vmin;
}

.eyes::after {
    right: 4vmin;
}

Definieren Sie eine sanfte Sprunganimation für das Monster und kombinieren Sie sie mit den folgenden Animationseffekten, um ihm die Elastizität von Gelee zu verleihen:

.body {
    animation:
        bounce 1s infinite alternate;
}

@keyframes bounce {
    to {
        bottom: calc(-1 * 32vmin / 2 - 2vmin);
    }
}

Lassen Sie den Körper des Monsters rotieren:

@keyframes wave {
    to {
        transform: rotate(360deg);
    }
}

Lassen Sie das Monster umherwandern Gehen:

.monster {
    overflow: hidden;
}

.body {
    left: -2vmin;
    animation:
        wander 5s linear infinite alternate,
        wave 3s linear infinite,
        bounce 1s infinite alternate;
}

.eyes {
    animation: wander 5s linear infinite alternate;
}

@keyframes wander {
    to {
        left: calc(100% - 32vmin + 2vmin);
    }
}

Zum Schluss die Augen des Monsters blinzeln lassen:

.eyes::before,
.eyes::after {
    animation: blink 3s infinite linear;
}

@keyframes blink {
    4%, 10%, 34%, 40% {
        transform: scaleY(1);
    }

    7%, 37% {
        transform: scaleY(0);
    }
}

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Animationseffekt einer allein gehenden Person zu erzielen (Quellcode im Anhang)

So verwenden Sie reines CSS. Implementieren Sie einen Papierkran (mit Quellcode)

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