code.juejin.cn/pen/7296024…
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes moveUpDown {
0%,
100% {
top: 50%;
}
50% {
top: 48%;
}
}
@keyframes moveLeftRight {
0%,
100% {
left: 50%;
}
50% {
left: 48%;
}
}
@keyframes blink {
0%,
100% {
height: 40px;
}
50% {
height: 20px;
}
}
@keyframes movePupil {
0%,
20% {
transform: translate(-50%, -50%);
}
50% {
transform: translate(-80%, -50%);
}
70% {
transform: translate(-10%, -50%);
}
100% {
transform: translate(-50%, -50%);
}
}
.face {
width: 370px;
height: 200px;
background-color: #ffd700;
border-radius: 60px 100px;
position: relative;
margin: 0 auto;
margin-top: 50px;
}
.eyes-container {
width: 200px;
display: flex;
justify-content: space-between;
position: relative;
top: 50px;
}
.eye {
width: 70px;
height: 60px;
background-color: white;
border: 2px solid black;
border-radius: 50%;
animation: moveLeftRight 4s infinite alternate,
moveUpDown 3s infinite alternate, blink 2s infinite;
position: relative;
}
.eyebrow {
width: 80px;
height: 10px;
background-color: #222;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-radius: 50px 50px 0 0;
}
.nose1 {
width: 20px;
height: 20px;
background-color: #ff5733;
position: absolute;
top: 60px;
left: 85%;
transform: translateX(-50%);
border-radius: 50%;
animation: nosePulse 2s infinite alternate;
}
.nose {
width: 20px;
height: 20px;
background-color: #ff5733;
border-radius: 50%;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
animation: nosePulse 2s infinite alternate;
}
.nose2 {
width: 20px;
height: 20px;
background-color: #ff5733;
position: absolute;
top: 60px;
right: -20%;
transform: translateX(-50%);
border-radius: 50%;
animation: nosePulse 2s infinite alternate;
}
@keyframes nosePulse {
0% {
width: 20px;
height: 20px;
}
50% {
width: 30px;
height: 30px;
}
100% {
width: 20px;
height: 20px;
}
}
.mouth {
width: 60px;
height: 30px;
border: 2px solid #ff0000;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
position: absolute;
top: 152px;
left: 54%;
transform: translateX(-50%);
}
.pupil {
width: 20px;
height: 20px;
background-color: brown;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: movePupil 4s infinite ease-in-out;
}
.pupil-center {
width: 6px;
height: 6px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="face">
<div class="eyes-container">
<div class="eye">
<div class="eyebrow"></div>
<div class="pupil">
<div class="pupil-center"></div>
</div>
</div>
<div class="eye">
<div class="eyebrow"></div>
<div class="pupil">
<div class="pupil-center"></div>
</div>
</div>
<div class="nose1"></div>
<div class="nose2"></div>
</div>
<div class="mouth"></div>
</div>
</body>
</html>