Wie man mit reinem CSS einen lächelnden und meditierenden kleinen Mönch realisiert

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um einen lächelnden und meditierenden kleinen Mönch zu verwirklichen. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau:

Codeinterpretation:

Dom definieren , die verschiedenen im Container enthaltenen Elemente repräsentieren Kopf, Augen, Mund, Körper und Beine:

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

Zentrierte Anzeige:

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

Definieren Sie die Größe des Containers und legen Sie die horizontale Mittelausrichtung fest der untergeordneten Elemente:

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

Zeichnen Sie den Umriss des Kopfes:

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

Zeichnen Sie die Augen mit Pseudoelementen:

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

Zeichnen Sie den Mund:

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

Zeichne den Körper:

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

Zeichne die Beine:

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

Zeichne die Ohren und Hände mit Schatten:

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

Zeichne die Augenbrauen mit radialem Farbverlauf:

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

Zeichne den Schatten des Körpers:

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

Lass den kleinen Mönch auf und ab schweben:

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

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

Halte den Schatten in einer festen Position und schwebe nicht mit der Person:

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

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

Verwandte Empfehlungen:

So verwenden Sie CSS und D3, um den Animationseffekt einer Zykloidenschwingung zu realisieren

Wie Sie CSS verwenden, um den Animationseffekt einer Achterbahn zu realisieren Lader

Das obige ist der detaillierte Inhalt vonWie man mit reinem CSS einen lächelnden und meditierenden kleinen Mönch realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!