Front-end daily combat: # 58 video demonstrates how a cartoon parrot with pure CSS creation

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/vrRmWy

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/c7adzTW

Source code download

Daily front-end combat series full source code can be downloaded from github:

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

Code Reading

Defined dom, sub-container contains 3 elements:

<div class="parrot">
    <div class="outer"></div>
    <div class="middle"></div>
    <div class="inner"></div>
</div>

Centered:

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

Is defined container sizes:

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

Draw parrot feather head:

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

Draw parrot beak head and the upper half portion:

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

Draw the lower half of the beak parrot:

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

Draw parrot eyes with pseudo-elements:

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

The positive picture:

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

Provided mouseover effects, parrot head to hover the other side:

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

Finally, modify hover parrot color:

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

We're done!