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

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

不言

Libérer： 2018-09-03 17:56:34

original

1667 Les gens l'ont consulté

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

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

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>

Copier après la connexion

Définissez la couleur de fond :

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

Copier après la connexion

Définissez la couleur du premier plan :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Laissez les yeux du monstre Tourner le corps :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!