So erzielen Sie mit reinem CSS den Effekt eines Cartoon-Papageien

Dieser Artikel stellt hauptsächlich vor, wie man mit reinem CSS den Effekt eines Cartoon-Papageis erzielt. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

Quellcode-Download

Bitte laden Sie den gesamten Quellcode der täglichen Front-End-Praxisreihe von Github herunter:

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

Codeinterpretation

Dom definieren, der Container enthält 3 Unterelemente:

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

Zentrierte Anzeige:

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

Containergröße definieren:

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

Zeichne die Federn auf dem Kopf des Papageis:

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

Zeichne den Kopf des Papageis und den oberen Teil seines Schnabels:

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

Zeichne den unteren Teil des Papageienschnabels:

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

Verwenden Sie Pseudoelemente, um die Augen des Papageis zu zeichnen:

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

Drehen Sie das Bild nach vorne:

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

Stellen Sie den Maus-Hover-Effekt so ein, dass sich der Kopf des Papageis auf die andere Seite dreht beim Schweben:

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

Zuletzt ändern Sie die Farbe des Papageis beim Schweben:

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

Fertig!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Effekt eines Einzelelement-Gitterladers zu implementieren

So verwenden Sie reines CSS, um Implementierung einer Kaffeemaschine Die Wirkung von

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt eines Cartoon-Papageien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!