會(huì)動(dòng)的小黃人是一款非常受歡迎的卡通形象，無論是在動(dòng)畫還是電影中，小黃人總是能帶給我們無窮無盡的歡樂和驚喜。而如今，我們可以使用 CSS 來實(shí)現(xiàn)這個(gè)可愛的小黃人的動(dòng)態(tài)效果。

.yellow-man {
position: relative;
}
.yellow-man .eyes {
position: absolute;
width: 16px;
height: 16px;
top: 50px;
left: 50%;
margin-left: -8px;
background-color: #fff;
border-radius: 100%;
animation: blink 4s infinite ease-in-out;
}
@keyframes blink {
0%, 45%, 55%, 100% {
transform: translateY(0);
}
50%, 54% {
transform: translateY(10px);
}
}
.yellow-man .mouth {
position: absolute;
width: 16px;
height: 4px;
top: 70px;
left: 50%;
margin-left: -8px;
background-color: #000;
border-radius: 5px;
animation: open-mouth 2s infinite ease-out;
}
@keyframes open-mouth {
0%, 100% {
height: 4px;
}
50% {
height: 16px;
}
}
.yellow-man .hands {
position: absolute;
width: 10px;
height: 50px;
top: 80px;
left: 50%;
margin-left: -5px;
background-color: #000;
border-radius: 15px;
transform-origin: bottom;
animation: wave 2s infinite ease-in-out;
}
@keyframes wave {
0%, 100% {
transform: rotate(0);
}
50% {
transform: rotate(-45deg);
}
}

在上面的代碼中，我們先為小黃人設(shè)置一個(gè)相對(duì)定位的父元素，然后分別為小黃人的眼睛、嘴巴和手臂添加絕對(duì)定位。接下來，我們使用 CSS 的動(dòng)畫和 transform 屬性來實(shí)現(xiàn)小黃人的三個(gè)動(dòng)態(tài)效果：眨眼睛、張嘴和揮手。

通過這樣一個(gè)簡(jiǎn)單的示例，我們不僅能夠理解 CSS 動(dòng)畫的基本原理，而且可以在實(shí)踐中掌握如何運(yùn)用 CSS 來實(shí)現(xiàn)豐富多彩的動(dòng)態(tài)效果，讓頁面更加生動(dòng)有趣。