使用 CSS 創建波浪動畫效果，可以通過 @keyframes 和 transform 屬性來實現波浪形的運動

1. HTML結構

   <div class="wave-container">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
  </div>

• wave-container ： 這是波浪的容器，用來包裹多層波浪
• wave：代表一個波浪形狀

2.CSS設定

a. 基本結構和樣式設置

body {
    margin: 0;
    overflow: hidden; /* 防止滾動條顯示 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white; 
}

• overflow ： 防止出現滾動條，確保波浪動畫不會超出視口範圍
• display ：使用 Flexbox 來將內容居中
• height : 設置 body 的高度為視口的 100% 高度
• background-color : 設置背景顏色為白色

b. 波浪容器

.wave-container {
    position: relative;
    width: 100%;
    height: 800px;
}

• position : 設定 wave-container 的相對定位，讓內部的波浪能夠絕對定位
• width : 設定容器的寬度為 100% 視口寬度，高度為 800px

c. 波浪動畫

.wave {
    position: absolute;
    width: 200vw;
    height: 200vw;
    background-color: #ff191b;
    opacity: 0.4;
    top: -75vw;
    left: 50%;
    margin-left: -100vw;
    margin-top: -100vw;
    border-radius: 43%;
    animation: wave-animation 10s infinite linear;
}

• position : 設置為絕對定位，使其能夠在容器內自由移動
• width : 設置波浪的寬度和高度為視口寬度的兩倍，這樣能夠覆蓋整個波浪容器
• opacity : 設置波浪的透明度
• top、left、margin-left、margin-top : 將波浪定位到容器的中央，並向上偏移，以便它在視口外部開始旋轉
• border-radius : 設置圓角，以便波浪呈現圓形
• animation : 應用動畫，使波浪在 10 秒內完成一次旋轉，並且持續無限循環

d. 不同波浪樣式

.wave:nth-child(1) {
    animation: wave-animation 20s infinite linear;
    opacity: 0.1;
    background-color: #777;
}

.wave:nth-child(2) {
    animation: wave-animation 25s infinite linear;
    opacity: 0.1;
    background-color: #777;
} 

@keyframes wave-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

• animation：控制波浪的旋轉動畫，設定為無限 (infinite) 循環，持續旋轉不斷
  • 20s 和 25s : 分別控制不同波浪的動畫時間，以不同的速度旋轉
  • linear：確保旋轉的速度是線性的，不會忽快忽慢
• nth-child：為不同的波浪應用不同的動畫時間和透明度

3.結果呈現