How to use pure CSS to realize a smiling and meditating little monk-CSS Tutorial-php.cn

How to use pure CSS to realize a smiling and meditating little monk

不言

Release： 2018-08-11 11:43:04

Original

3495 people have browsed it

The content of this article is about how to use pure CSS to realize a smiling and meditating little monk. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview:

How to use pure CSS to realize a smiling and meditating little monk

## Code interpretation:

Definition of dom , the several elements contained in the container represent the head, eyes, mouth, body and legs respectively:

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

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(white, bisque);
}

Copy after login

Define the size of the container and set the horizontal center alignment of child elements:

.buddha {
    width: 13em;
    height: 19em;
    font-size: 20px;
    border: 1px dashed black;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

Copy after login

Draw the outline of the head:

.head {
    width: 12.5em;
    height: 12.5em;
    color: peachpuff;
    background: currentColor;
    border-radius: 50%;
    filter: brightness(0.9);
}

Copy after login

Draw the eyes with pseudo elements:

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

Copy after login

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

Copy after login

Draw the body:

.body {
    position: absolute;
    width: 10em;
    height: 8em;
    background-color: coral;
    border-radius: 4em;
    bottom: 1em;
    z-index: -1;
}

Copy after login

Draw the legs:

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

Copy after login

Use shadows to draw the ears and hands:

.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 */
}

Copy after login

Use radial gradient to draw the eyebrows:

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

Copy after login

Draw the body Shadow:

.shadow {
    position: absolute;
    width: inherit;
    height: 5em;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    bottom: -4em;
    transform: rotateX(100deg);
}

Copy after login

Let the little monk float up and down:

.buddha {
    animation: animate 3s ease-in-out infinite;
}

@keyframes animate {
    50% {
        transform: translateY(-2em);
    }
}

Copy after login

Keep the shadow in a fixed position and not float with people:

.shadow {
    animation: shadow-animate 3s ease-in-out infinite;
}

@keyframes shadow-animate {
    50% {
        transform: rotateX(100deg) translateY(-10em) scale(0.7);
    }
}

Copy after login

Related recommendations:

How to use CSS and D3 to realize the animation effect of cycloidal swing

How to use CSS to realize the animation effect of roller coaster loader

The above is the detailed content of How to use pure CSS to realize a smiling and meditating little monk. For more information, please follow other related articles on the PHP Chinese website!