透過CSS製作波浪的動態背景，

準備一張白色無縫波浪形狀透明度10%的無縫圖片，

設定背景顏色 #f2709c、#ff9472 由左到右的漸層以及2層的白色波浪圖片，

HTML：

<div class="wrap">
  <div class="bg-wave waveOne"></di>
  <div class="bg-wave waveTwo"></div>
</div>

CSS：

body {
  background-image: -webkit-linear-gradient(left, #f2709c 0%,#ff9472 100%);
  background-image: linear-gradient(to right, #f2709c 0%,#ff9472 100%);
  witdh: 100%;
}
.wrap {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 120px;
}
.bgWave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat;
  background-position: left bottom;
  transform-origin: left bottom;
}

圖片範圍寬度設定為200%，讓動畫能無接縫循環播放，對齊位置及變形起始點為 left & bottom，接著各別定義樣式細節。

CSS：

.waveOne {
  background-size: 50% 120px;
  background-image: url(https://upload.cc/i1/2020/05/14/A2kBfn.png);
  animation: wave 12s linear infinite;
}
.waveTwo {
  background-size: 50% 120px;
  background-image: url(https://upload.cc/i1/2020/05/14/A2kBfn.png);
  animation: wave-reverse 6s linear infinite;
  right: 0;
  left: auto;
}

因圖片範圍寬度為200%，在這裡 background-size 寬度設定50%即為螢幕的100%，

在animation設置依序為：

1、動畫定義影格 @keyframe的名字

2、完成動畫一次週期的時間分別為12秒及6秒

3、動畫轉變時間的加速曲線 linear

4、動畫重複播放

@keyframes wave {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(-50%)
    }
}

第一層圖片動畫轉變方式設定為X軸水平向左移動50%

@keyframes wave-reverse {
    0% {
        transform: translateX(0) scaleY(1)
    }
    50% {
        transform: translateX(25%) scaleY(0.55)
    }
    100% {
        transform: translateX(50%) scaleY(1)
    }
}

第二層圖片動畫轉變方式設定為X軸水平向右移動50%，另外加上Y軸尺寸的縮放。

以上設定即完成波浪無接縫動畫的呈現。