How to use pure CSS to realize a little monk with a smile meditation

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

Effect preview:

Code interpretation:

Defines the DOM, which contains several elements that represent the head, eyes, mouth, body, and legs, respectively:

<p class= "Buddha" >    <p class= "Head" ></p>    <p class= "Eyes" ></p>    <span class= "Mouth" ></span>    <span class= "Body" ></span>    <span class= "Legs" ></span >    <span class= "Shadow" ></span></p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:linear-gradient (white, bisque);}

Define container dimensions, set child elements to align horizontally:

. buddha {    width:13em;    Height:19em;    font-size:20px;    border:1px dashed black;    Display:flex;    Align-items:center;    Flex-direction:column;    Position:relative;}

Draw the outline of the head:

. head {    width:12.5em;    height:12.5em;    Color:peachpuff;    Background:currentcolor;    border-radius:50%;    Filter:brightness (0.9);}

To draw an eye with a pseudo-element:

. eyes::before,.eyes::after {    content: ';    Position:absolute;    Width:1em;    height:0.5em;    Border:0.6em solid #333;    Border-radius:1em 1em 0 0;    Border-bottom:none;    Top:6em;}. Eyes::before {    left:2.5em;}. eyes::after {    right:2.5em;}

To draw a mouth:

. mouth {    position:absolute;    width:1.5em;    height:0.5em;    Border:0.5em solid tomato;    border-radius:0 0 1.5em 1.5em;    Border-top:none;    Top:9em;}

Draw the body:

. body {    position:absolute;    Width:10em;    Height:8em;    background-color:coral;    Border-radius:4em;    Bottom:1em;    Z-index:-1;}

Draw the leg:

. legs {    position:absolute;    Width:inherit;    height:5em;    background-color:coral;    border-radius:2.5em;    bottom:0;    Z-index:-1;}

Draw your ears and hands with a shadow:

. Head {    Box-shadow:         5.8em 2em 0-4.8em,/* ear right*/        -5.8em 2em 0-4.8em,/* ear left*/        0 8.6em 0-4 .5em; /* Hand */}

To draw the eyebrows with a radial gradient:

. head {    background:         radial-gradient (            circle at 50% 40%,            tomato 0.6em,            transparent 0.6em        ),/* Circle between Eyebrows */        currentcolor;}

Draw a shadow of the body:

. shadow {    position:absolute;    Width:inherit;    height:5em;    Background-color:rgba (0, 0, 0, 0.2);    border-radius:50%;    Bottom: -4em;    Transform:rotatex (100deg);}

Let the little monk float up and down:

. buddha {    animation:animate 3s ease-in-out infinite;} @keyframes Animate {    50% {        transform:translatey ( -2EM);    }}

Keep the shadow in a fixed position, not as the person floats:

. Shadow {    animation:shadow-animate 3s ease-in-out infinite;} @keyframes shadow-animate {    50% {        Transform:rotatex (100deg) Translatey ( -10em) scale (0.7);    }}