Comment utiliser du CSS pur pour implémenter un oiseau rouge en colère (avec code)-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour implémenter un oiseau rouge en colère (avec code)

不言

Libérer： 2018-08-25 17:40:04

original

2113 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour implémenter un oiseau rouge en colère (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. vous. Vous avez aidé.

Aperçu de l'effet

Comment utiliser du CSS pur pour implémenter un oiseau rouge en colère (avec code)

Téléchargement du code source

https://github.com/comehope/front- fin-daily-challenges

Interprétation du code

Définissez dom, le conteneur contient 6 éléments, représentant la tête, les yeux, les sourcils, la bouche, la crête et la queue :

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: antiquewhite;
}

Copier après la connexion

Définissez les attributs communs des éléments enfants :

.red * {
    position: absolute;
}

.red *::before,
.red *::after {
    content: '';
    position: absolute;
}

Copier après la connexion

Définissez la taille du conteneur :

.red {
    width: 12em;
    height: 11em;
    font-size: 16px;
    position: relative;
}

Copier après la connexion

Dessinez le contour du head, Les paramètres de trait sont définis comme des variables car ils seront utilisés plus tard :

.red {
    --border: 0.2em solid #6a0306;
}

.head {
    width: inherit;
    height: inherit;
    background-color: #dc002d;
    border-radius: 45% 55% 45% 45% / 55% 60% 40% 45%;
    border: var(--border);
}

Copier après la connexion

Utiliser des pseudo éléments pour dessiner le contour des yeux :

.eyes::before,
.eyes::after {
    width: 2.4em;
    height: 2.6em;
    background: white;
    border-radius: 50%;
    border: var(--border);
}

.eyes::before {
    top: 3.7em;
    left: 5.5em;
    z-index: 1;
}

.eyes::after {
    top: 3.8em;
    left: 7.8em;
}

Copier après la connexion

Utiliser des dégradés radiaux pour dessiner les globes oculaires et les pupilles :

.eyes::before,
.eyes::after {
    background: 
        radial-gradient(
            circle at calc(var(--eyeball-left) + 6%) 48%,
            white 0.1em,
            transparent 0.1em
        ),
        radial-gradient(
            circle at var(--eyeball-left) 48%,
            black 0.5em,
            transparent 0.5em
        ),
        white;
}

.eyes::before {
    --eyeball-left: 65%;
}

.eyes::after {
    --eyeball-left: 41%;
}

Copier après la connexion

Dessinez les sourcils avec des pseudo éléments :

.eyebrows::before,
.eyebrows::after {
    height: 1.1em;
    background-color: black;
    top: 3.6em;
    z-index: 2;
}

.eyebrows::before {
    left: 5em;
    transform: skewY(12deg);
    width: 3.4em;
}

.eyebrows::after {
    left: 8.2em;
    transform: skewY(-15deg);
    width: 3.1em;
}

Copier après la connexion

Dessinez le contour de la bouche :

.mouth {
    width: 2.8em;
    height: 2.8em;
    background-color: #fca90d;
    top: 6em;
    left: 7em;
    z-index: 3;
    border-radius: 20% 0 20% 10%;
    transform: rotate(34deg) skewX(-15deg);
    border: 0.1em solid black;
}

Copier après la connexion

Dessinez le haut et mâchoires inférieures avec pseudo-éléments La ligne de démarcation :

.mouth::before {
    width: 3.4em;
    height: 4em;
    border: 0.2em solid;
    top: -1.6em;
    left: -1.8em;
    border-radius: 0 0 40% 0;
    transform: rotate(42deg);
    border-color: transparent black transparent transparent;
}

Copier après la connexion

Dessinez le côté gauche des plumes de la couronne :

.hair {
    width: 1.2em;
    height: 3em;
    background-color: #dc002d;
    border-radius: 50%;
    border: var(--border);
    top: -1.8em;
    left: 2.8em;
    transform: rotate(-70deg);
    border-bottom-color: transparent;
}

Copier après la connexion

Utilisez des pseudo-éléments pour dessiner le côté droit des plumes de la couronne :

.hair::before {
    width: inherit;
    height: inherit;
    background-color: inherit;
    border-radius: inherit;
    border: inherit;
    top: 1em;
    left: 0.8em;
    transform: rotate(20deg);
}

Copier après la connexion

Utilisez des pseudo-éléments pour couvrir les bords supplémentaires des plumes de la couronne :

.hair::after {
    width: 3em;
    height: 2em;
    background-color: #dc002d;
    border-radius: 50%;
    top: 2.3em;
    left: -1.5em;
    transform: rotate(70deg);
}

Copier après la connexion

Dessinez la plume la plus longue de la queue :

.tail {
    width: 3em;
    height: 1em;
    background-color: black;
    top: 40%;
    left: -1.8em;
    z-index: -1;
    transform: rotate(15deg);
}

Copier après la connexion

Utilisez des pseudo-éléments pour dessiner les plumes les plus longues de la queue Deux plumes courtes :

.tail::before,
.tail::after {
    width: inherit;
    height: 70%;
    background-color: black;
    left: 0.6em;
}

.tail::before {
    transform: rotate(25deg);
    top: -0.4em;
}

.tail::after {
    transform: rotate(-20deg);
    top: 0.8em;
}

Copier après la connexion

Utilisez des pseudo éléments pour dessiner les plumes de la poitrine :

.head {
    overflow: hidden;
}

.head::before {
    width: inherit;
    height: inherit;
    background-color: #e3c4ab;
    border-radius: inherit;
    top: 65%;
    left: 25%;
}

Copier après la connexion

Ensuite, dessinez des ombres pour rehausser les trois- effet dimensionnel.

Ajouter des ombres à la tête :

.head {
    box-shadow: 
      inset 0.5em -0.5em 0.3em 0.2em rgba(0, 0, 0, 0.2),
      inset -1em 0.8em 1.5em -0.5em rgba(237, 178, 144, 0.7);
}

Copier après la connexion

Ajouter des ombres aux yeux :

.eyes::before {
    box-shadow: -0.2em 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.2);
}

.eyes::after {
    box-shadow: 0.2em 0.2em 0.4em 0.3em rgba(0, 0, 0, 0.1);
}

Copier après la connexion

Ajouter des ombres à la bouche :

.mouth {
    box-shadow: 
      inset 0.2em -0.4em 1em rgba(0, 0, 0, 0.4),
      inset 0 0.5em 0.5em rgba(255, 255, 255, 0.3);
}

Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter l'effet d'animation de chargement d'une voiture de course (avec code)

Comment utiliser du CSS pur pour implémenter l'effet d'animation popsicles (avec code)

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!