波浪 CSS 貓是一種非常有趣的 CSS 動畫效果，能夠讓你的網站更加生動活潑。下面我們來看一下如何實現這個效果。

/* 定義波浪動畫 */
@keyframes wave {
0% {
transform: rotate(0);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(0deg);
}
}
/* 定義貓的樣式 */
.cat {
width: 100px;
height: 100px;
position: relative;
transform: rotate(0deg);
}
.cat:before,
.cat:after {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 100%;
height: 70px;
border-radius: 50%;
background-color: #ffc107;
}
/* 定義波浪動畫對應的樣式 */
.cat:before {
animation: wave 1s ease-in-out infinite;
transform-origin: 50% 0;
}
.cat:after {
animation: wave 1s ease-in-out 0.5s infinite;
transform-origin: 50% 0;
}

如上述代碼所示，我們首先定義了一個波浪動畫，然后定義了貓的樣式，包括貓的顏色、尺寸和旋轉角度。接著，我們使用:before和:after偽類來創建貓的耳朵，這兩個偽類分別對應貓的兩只耳朵。

最后，我們將:before和:after偽類分別應用了波浪動畫，這樣貓的耳朵就會像波浪一樣不斷晃動。

使用波浪 CSS 貓能夠讓你的網站更有趣，吸引更多用戶的關注。如果你想要了解更多關于 CSS 動畫的知識，可以去查閱相關資料。