原文地址：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;
}