在網頁開發中，動畫是非常重要的元素之一，能夠增加頁面趣味性以及提高用戶的體驗。而 CSS3 動畫是我們常用的一種制作網頁動畫的方式，今天我們來介紹一下如何使用 CSS3 制作一個波浪動畫。

.wave {
position: relative;
width: 100%;
height: 300px;
background: #abcdef;
overflow: hidden;
}
.wave::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
border-radius: 50%;
transform-origin: bottom center;
animation: wave 7s linear infinite;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上是 CSS3 波浪動畫的核心代碼。首先，我們需要先創建一個容器（如上代碼中的 .wave），然后給它設置一個白色的半透明圓形背景，再創建一個偽元素（::before）作為波浪動畫的主體元素。在偽元素中，我們設置它的初始位置為容器底部（bottom: 0;），讓它占據容器的雙倍寬高（width: 200%; height: 200%;），然后給它設置一個圓形半透明的背景漸變。

接下來，我們為偽元素添加 animation 屬性，讓它按照一定的時長（如上代碼中的 7s）和動畫類型（linear）執行變化，并使用無限循環來使動畫持續不斷。而動畫的具體變化效果就是使用 rotate() 函數來讓偽元素不停地旋轉，從而營造出水波浪動的效果。

最后，我們需要在 CSS 樣式表中定義一個 @keyframes 規則，以指定動畫效果的具體變化過程。在這個示例中，我們只定義了兩個關鍵幀（0% 和 100%），分別代表動畫開始和結束時的狀態。我們將偽元素從 0 度旋轉到 360 度，這樣就能創建出一個完整的波浪效果。