58.纯 CSS 创作一只卡通鹦鹉

原文地址：https://segmentfault.com/a/1190000015339977

优化后效果地址：https://scrimba.com/c/c97Z2vuD

感想：消除了图片外的:hover触发过渡效果

HTML code：

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

CSS code：

html, body {
    margin:;
    padding:;
}
*{
    /* 所有元素设置的宽高包含内边距、边框和内容区 */
    box-sizing: border-box;
}
/* 设置body的子元素水平垂直居中 */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkslategray;
}
/* 设置.parrot容器尺寸 */
.parrot{
    /* 修改font-size的值直接改变鹦鹉的大小 */
    font-size: 25px;
    position: relative;
    width: 10em;
    height: 10em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 旋转45度 */
    transform:  rotate(45deg);
    overflow: hidden;
}
.parrot > *{
    /* 过渡时间 */
    transition: 0.5s;
}
/* 画出鹦鹉头部的羽毛 */
.parrot .outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1em solid;
    border-color: transparent transparent orangered tomato;
}
/* 画出鹦鹉头部的羽毛 */
.parrot .middle {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 4em solid;
    border-color: gold transparent gainsboro white;
    border-radius: 50%;
}
/* 画出鹦鹉的喙的下半部分 */
.parrot .inner {
    position: absolute;
    width: 40%;
    height: 40%;
    border: 2em solid;
    border-color: transparent orange transparent transparent;
    border-radius: 50%;
}
/* 用.inner的伪元素画出鹦鹉的眼睛 */
.parrot .inner::before {
    position: absolute;
    left: -2em;
    top: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: black;
}
/* 设置鼠标悬停效果，悬停时鹦鹉的头转向另一侧 */
.parrot:hover .outer {
    transform: rotate(180deg);
    border-color: transparent transparent lightseagreen darkcyan;
}
.parrot:hover .middle {
    transform: rotate(180deg);
    border-color: transparent gold white gainsboro;
}
.parrot:hover .inner {
    transform: rotate(90deg);
    border-color: transparent orange transparent transparent;
}