How to use pure CSS to realize the lingering jelly monsters (with source code)

This article brings you the content is about how to use the pure CSS to achieve the lingering jelly monster, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 2 elements, each representing the body and eyes of the beast:

<p class= "Monster" >    <span class= "Body" ></span>    <span class= "Eyes" ></span> </p>

To set the background color:

body {    margin:0;    HEIGHT:100VH;    Background-color:black;}

Set Foreground color:

. monster {    width:100vw;    HEIGHT:50VH;    Background-color:lightcyan;}

Draw the body of a monster:

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

Define the container where the beast's eyes are located:

. eyes {    width:24vmin;    Height:5vmin;    Position:absolute;    Bottom:2vmin;    Left:calc (32vmin-24vmin-2vmin);}

Use pseudo-elements to draw the eye of a monster:

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

Define a lightly-animated animation for the monster, combining the animated effect behind it to give it the elasticity of the jelly:

. body {    animation:        bounce 1s infinite alternate;} @keyframes Bounce {To    {        Bottom:calc ( -1 * 32VMIN/2-2vmin);}    }

Let the monster's body spin:

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

Let the Beast Wander:

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

Finally, let the Beast's eyes blink:

. eyes::before,.eyes::after {    animation:blink 3s infinite linear;} @keyframes Blink {    4, 10%, 34%, 40% {        Transform:scaley (1);    }    7%, 37% {        Transform:scaley (0);    }}

Done!