正在准备设计规范
01.my-custom-face-container {02 display: flex;03 justify-content: center;04 align-items: center;05 height: 500px;06 background: #ffffff00;07 color: #1a1a1a;08}09 10.my-custom-face-container .face {11 width: 200px;12}13 14.my-custom-face-container .face__eyes,15.my-custom-face-container .face__eye-lid,16.my-custom-face-container .face__mouth-left,17.my-custom-face-container .face__mouth-right,18.my-custom-face-container .face__nose,19.my-custom-face-container .face__pupil {20 animation: eyes 1s 0.3s forwards;21}22 23.my-custom-face-container .face__eye-lid,24.my-custom-face-container .face__pupil {25 animation-duration: 4s;26 animation-delay: 1.3s;27 animation-iteration-count: infinite;28}29 30.my-custom-face-container .face__eye-lid {31 animation-name: eye-lid;32}33.my-custom-face-container .face__mouth-left {34 animation-name: mouth-left;35}36.my-custom-face-container .face__mouth-right {37 animation-name: mouth-right;38}39.my-custom-face-container .face__nose {40 animation-name: nose;41}42.my-custom-face-container .face__pupil {43 animation-name: pupil;44}45 46@keyframes eye-lid {47 0%,48 40%,49 45%,50 100% {51 transform: translateY(0);52 }53 42.5% {54 transform: translateY(17.5px);55 }56}57 58@keyframes eyes {59 from {60 transform: translateY(112.5px);61 }62 to {63 transform: translateY(15px);64 }65}66 67@keyframes pupil {68 0%,69 37.5%,70 40%,71 45%,72 87.5%,73 100% {74 stroke-dashoffset: 0;75 transform: translate(0, 0);76 }77 12.5%,78 25%,79 62.5%,80 75% {81 transform: translate(-35px, 0);82 }83 42.5% {84 stroke-dashoffset: 35;85 transform: translate(0, 17.5px);86 }87}88 89@keyframes mouth-left {90 from,91 50% {92 stroke-dashoffset: -102;93 }94 to {95 stroke-dashoffset: 0;96 }97}98 99@keyframes mouth-right {100 from,101 50% {102 stroke-dashoffset: 102;103 }104 to {105 stroke-dashoffset: 0;106 }107}108 109@keyframes nose {110 from {111 transform: translate(0, 0);112 }113 to {114 transform: translate(0, 22.5px);115 }116}