小黃人（Minions）是由美國環(huán)球影業(yè)制作的一組小黃色生物。這些生物在電影《卑鄙的我》及其續(xù)集中扮演重要角色，因其形象可愛、幽默而備受喜愛。

在網(wǎng)頁設(shè)計(jì)中，小黃人也被應(yīng)用于CSS動(dòng)畫效果，給用戶帶來視覺上的驚喜和樂趣。

/* 小黃人CSS */
.minion {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.minion-body {
background-color: #FEE12B;
border-radius: 50% 50% 60% 60%;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(20%);
overflow: hidden;
}
.minion-eyes {
width: 60px;
height: 40px;
background-color: white;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.minion-eye {
width: 20px;
height: 20px;
background-color: #2C2C2C;
border-radius: 50%;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.minion-eye-left{
transform: translateX(-40%);
}
.minion-eye-right{
transform: translateX(40%);
}
.minion-goggles {
width: 120px;
height: 80px;
background-color: #393D49;
border-radius: 50%;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
overflow: hidden;
}
.minion-goggles-strap {
width: 20px;
height: 80px;
background-color: #191919;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.minion-goggles-strap-left {
transform: rotate(45deg) translateX(-50%) translateY(-27%);
}
.minion-goggles-strap-right {
transform: rotate(-45deg) translateX(50%) translateY(-27%);
}

通過以上CSS代碼，我們可以實(shí)現(xiàn)一個(gè)可愛的小黃人效果，包括黃色的圓形身體、白色的眼球和黑色的瞳孔、戴著黑色的護(hù)目鏡等細(xì)節(jié)。

除此之外，我們還可以通過JS代碼實(shí)現(xiàn)小黃人在頁面上的交互效果，例如移動(dòng)、表情變化等，更加增加用戶的趣味體驗(yàn)。