CSS 可以用來(lái)創(chuàng)建很多有趣的動(dòng)畫(huà)，今天我們來(lái)介紹一種非常有趣的 CSS 動(dòng)畫(huà)：貓頭鷹。

首先，我們需要準(zhǔn)備一張貓頭鷹的圖片。在這個(gè)例子中，我們使用以下圖片：

.owl {
background-image: url('owl.png');
width: 350px;
height: 250px;
}

接下來(lái)，我們要為該貓頭鷹添加動(dòng)畫(huà)效果。例如，我們可以讓貓頭鷹的眼睛閃爍：

.owl {
/* ... */
/* 讓貓頭鷹的眼睛閃爍 */
animation: blink 5s infinite alternate;
}
@keyframes blink {
0% { background-position: 0 0; }
50% { background-position: -350px 0; }
100% { background-position: 0 0; }
}

這段代碼給貓頭鷹的容器添加了一個(gè)名為 “blink” 的動(dòng)畫(huà)效果，持續(xù)時(shí)間為 5 秒，并且無(wú)限循環(huán)。在每個(gè)循環(huán)中，動(dòng)畫(huà)會(huì)反向進(jìn)行。

接下來(lái)，我們還可以讓貓頭鷹的翅膀扇動(dòng)，為它添加一些陰影效果等等。通過(guò)不斷嘗試，你可以為你的貓頭鷹添加非常獨(dú)特的動(dòng)畫(huà)效果。

最后，這是我們最終的代碼：

現(xiàn)在，你已經(jīng)知道如何使用 CSS 創(chuàng)建一個(gè)有趣的貓頭鷹動(dòng)畫(huà)了。嘗試自己制作一些其他有趣的動(dòng)畫(huà)，讓你的網(wǎng)站變得更加生動(dòng)吧！