CSS是一種強大的標記語言，可以用來美化網頁的外觀和交互效果。我們可以使用CSS來繪制游動的魚，讓網頁變得更加生動。

/*定義魚的身體*/
.fish {
width: 50px;/*身體寬度*/
height: 30px;/*身體高度*/
border-radius: 50%;/*圓角*/
position: relative;/*相對定位*/
background-color: orange;/*橙色*/
}
/*定義魚的尾巴*/
.fish::before {
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;/*三角形的上邊框*/
border-right: 30px solid orange;/*三角形的右邊框*/
border-bottom: 15px solid transparent;/*三角形的下邊框*/
position: absolute;/*絕對定位*/
left: -28px;/*離身體左邊的位置*/
top: 0px;/*離身體頂部的位置*/
}
/*定義魚的眼睛*/
.fish::after {
content: "";
width: 8px;/*眼睛的寬度*/
height: 8px;/*眼睛的高度*/
border-radius: 50%;/*圓角*/
background-color: white;/*白色*/
position: absolute;/*絕對定位*/
left: 25px;/*離身體左邊的位置*/
top: 8px;/*離身體頂部的位置*/
}
/*設置魚的動畫*/
@keyframes swim {
0% {
transform: translateX(0);/*初始位置*/
}
50% {
transform: translateX(200px);/*中間位置*/
}
100% {
transform: translateX(0);/*結束位置*/
}
}
/*為魚添加動畫*/
.fish {
animation: swim 3s ease-in-out alternate infinite;/*循環(huán)動畫*/
}

以上代碼定義了魚的身體、尾巴、眼睛以及動畫效果。我們可以將代碼復制到HTML文件中，將class為“fish”的div嵌入到頁面中即可。通過控制動畫的時間和方向，可以讓魚游動的速度和方向發(fā)生變化。