魚 CSS 動畫是一種非常有趣和富有創意的方式來為網站添加動畫效果。通過 CSS 的動畫屬性和關鍵幀動畫，您可以輕松地為您的網站添加一些有趣的魚類動畫效果。

/* 定義魚的樣式 */
.fish {
position: absolute;
width: 120px;
height: 70px;
background: url('fish.png') no-repeat;
animation: swim 4s linear infinite;
}
/* 魚的游泳動畫 */
@keyframes swim {
0% {
left: -120px;
transform: scaleX(-1);
}
50% {
transform: scaleX(-1) rotateY(180deg);
}
100% {
left: 100%;
transform: scaleX(-1);
}
}
/* 在 HTML 中嵌入魚類元素 */

通過定義魚類元素的樣式，包括魚類圖片和動畫樣式，您可以輕松創建活潑有趣的魚類動畫效果。請注意，在動畫的關鍵幀位置上，您可以定義不同的轉換，使魚在游泳過程中會偶爾翻轉。

除了魚類動畫，您還可以將 CSS 動畫應用到其他生物元素，如海藻、海星和海龜等，以達到類似的效果。在實踐中，您可以輕松消除 CSS 動畫帶來的性能問題，并提供一個更具吸引力的網站體驗。