Comment utiliser du CSS pur pour obtenir l'effet d'un perroquet de dessin animé

Cet article présente principalement comment utiliser du CSS pur pour obtenir l'effet de perroquet de dessin animé. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

<.>

Téléchargement du code source

Veuillez télécharger tout le code source de la série pratique quotidienne du front-end depuis github :

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

Interprétation du code

Définir dom, le conteneur contient 3 sous-éléments :

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

Affichage centré :

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

Définir la taille du contenant :

.parrot {
    width: 10em;
    height: 10em;
    font-size: 30px;
}

Dessinez les plumes de la tête du perroquet :

.parrot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parrot .outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1em solid;
    border-color: transparent transparent orangered tomato;
    border-radius: 50%;
}

Dessinez la tête du perroquet et la partie supérieure de son bec :

.parrot .middle {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 4em solid;
    border-color: gold transparent gainsboro white;
    border-radius: 50%;
}

Dessiner la tête du perroquet La partie inférieure du bec :

.parrot .inner {
    position: absolute;
    width: 40%;
    height: 40%;
    border: 2em solid;
    border-color: transparent orange transparent transparent;
    border-radius: 50%;
}

Dessiner les yeux du perroquet à l'aide de pseudo éléments :

.parrot .inner::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: black;
    border-radius: 50%;
    left: -2em;
    top: -0.5em;
}

Orienter l'image :

.parrot > * {
    transform: rotate(45deg);
}

Définir le survol L'effet est que la tête du perroquet tourne de l'autre côté au survol :

.parrot > * {
    transition: 0.5s;
}

.parrot:hover .outer {
    transform: rotate(225deg);
    border-color: transparent transparent tomato orangered;
}

.parrot:hover .middle {
    transform: rotate(calc(225deg - 360deg));
    border-color: transparent gold white gainsboro;
}

.parrot:hover .inner {
    transform: rotate(135deg);
}

Enfin, modifiez la couleur du perroquet au survol :

.parrot:hover .outer {
    border-color: transparent transparent lightseagreen darkcyan;
}

.parrot:hover .middle {
    border-color: transparent gold white gainsboro;
}

.parrot:hover .inner {
    border-color: transparent orange transparent transparent;
}

Vous êtes fait!

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour implémenter l'effet d'un chargeur de treillis à élément unique

Comment utiliser du CSS pur pour mettre en œuvre une machine à café L'effet de

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!