Comment utiliser du CSS pur pour implémenter un monstre de gelée errant (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser le monstre de gelée errant. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient 2 éléments, représentant respectivement le corps et les yeux du monstre :

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

Définissez la couleur de fond :

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

Définissez la couleur du premier plan :

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

Dessinez le corps du monstre :

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

Définissez le conteneur où se trouvent les yeux du monstre :

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

Utilisez pseudo-éléments Dessinez les yeux du monstre :

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

Définissez une animation de saut douce pour le monstre et combinez-la avec les effets d'animation ultérieurs pour lui donner l'élasticité d'une gelée :

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

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

Laissez les yeux du monstre Tourner le corps :

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

Laissez le monstre errer et marcher :

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

Enfin, faites cligner les yeux du monstre :

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

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

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

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'animation d'une personne marchant seule (code source ci-joint)

Comment utiliser du CSS pur Implémenter une grue en papier (avec code source)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!