原文地址：

优化后效果地址：

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

HTML code：

CSS code：

html, body {
          margin: 0;    padding: 0;}*{    /* 所有元素设置的宽高包含内边距、边框和内容区 */    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;}