效果地址：https://scrimba.com/c/cbNkBnuV
HTML code：
<!-- 定义dom, .eyes容器中包含2个元素 -->
<div class="eyes">
<span class="left"></span>
<span class="right"></span>
</div>
CSS code：
html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置容器尺寸 */
.eyes{
position: relative;
width: 30em;
height: 10em;
/* border: 1px solid white; */
font-size: 12px;
}
.eyes > * {
/* 设置宽高包含内边距/边框和内容 */
box-sizing: border-box;
position: absolute;
width: 10em;
height: 10em;
border: solid white;
/* 画眼球 */
border-width: 0 3em;
animation: blink 2s linear infinite;
}
.eyes .left{
left:;
border-radius: 50%;
/* 使双眼旋转90度变为正常的眼睛 */
transform: rotate(90deg);
}
.eyes .right {
right :;
border-radius: 50%;
transform: rotate(90deg);
}
/* 定义眨眼的动画 */
@keyframes blink{
40%, 60%{
border-width: 0 3em;
}
50% {
border-width: 0 5em;
}
}
/* 用.eyes的伪元素::after画出嘴巴 */
.eyes::after{
/* 设置宽高包含内边距/边框和内容 这里要是不设置，下面动画中的设置达不到要求*/
box-sizing: border-box;
position: absolute;
top: 10em;
left: 5em;
content:'';
width: 20em;
height: 12em;
border: solid white;
border-width: 3em 0;
border-radius: 50%;
animation: blink2 2s linear infinite;
}
@keyframes blink2{
40%, 60%{
border-width: 3em 0 ;
}
50% {
border-width: 6em 0 ;
}
}