Comment utiliser du CSS pur pour obtenir l'effet d'un perroquet de dessin animé-tutoriel CSS-php.cn

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

不言

Libérer： 2018-07-11 16:46:57

original

1847 Les gens l'ont consulté

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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Définir la taille du contenant :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Orienter l'image :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!