CSS貓表情制作是一種簡(jiǎn)單有趣的CSS動(dòng)畫(huà)技術(shù)，下面我們就一起來(lái)學(xué)習(xí)制作CSS貓表情。

.cat-eyes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
}
.cat-eyes::before,
.cat-eyes::after {
position: absolute;
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
background: #058AAB;
}
.cat-eyes::before {
top: 32%;
left: 40%;
}
.cat-eyes::after {
top: 32%;
left: 60%;
}
.cat-mouth {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 45px;
height: 25px;
border-radius: 0 0 60px 60px;
background: #fff;
z-index: -1;
}
.cat-nose {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
z-index: 1;
}
.cat-whisker {
position: absolute;
top: 49%;
left: 50%;
width: 75px;
height: 25px;
background: #ccc;
transform-origin: 0 50%;
z-index: 2;
overflow: hidden;
}
.cat-whisker::before,
.cat-whisker::after {
position: absolute;
content: '';
width: 75px;
height: 3px;
background: #000;
transform-origin: 0 50%;
transition: all 0.3s ease;
}
.cat-whisker::before {
transform: rotate(45deg);
top: 0;
}
.cat-whisker::after {
transform: rotate(-45deg);
bottom: 0;
}
.cat:hover .cat-eyes::before,
.cat:hover .cat-eyes::after {
width: 22px;
height: 22px;
}
.cat:hover .cat-nose {
top: 57%;
left: 48%;
}
.cat:hover .cat-whisker::before {
transform: rotate(30deg);
}
.cat:hover .cat-whisker::after {
transform: rotate(-30deg);
}

以上CSS代碼中定義了貓眼、貓嘴、貓鼻、貓須等各個(gè)部分的樣式，并在hover狀態(tài)下對(duì)貓眼、貓鼻、貓須進(jìn)行了一些變化，從而制作出了可愛(ài)的小貓動(dòng)畫(huà)效果。

通過(guò)學(xué)習(xí)這個(gè)簡(jiǎn)單有趣的CSS動(dòng)畫(huà)技術(shù)，我們可以更加熟練地應(yīng)用CSS制作動(dòng)畫(huà)效果，不斷提升自己的技能水平。