使用 CSS 漸變來實(shí)現(xiàn)波浪動(dòng)畫

作者：XboxYan 2023-06-05 09:28:32

這次嘗試一下使用 CSS 漸變來實(shí)現(xiàn)這樣一個(gè)效果，還可以用在文字背景上。

之前看到coco[1]的這樣一篇文章：純 CSS 實(shí)現(xiàn)波浪效果！[2]，非常巧妙，通過改變border-radius和不斷旋轉(zhuǎn)實(shí)現(xiàn)的波浪效果，有興趣的可以去研究一下。

這次嘗試一下使用 CSS 漸變來實(shí)現(xiàn)這樣一個(gè)效果，還可以用在文字背景上，如下：

不需要混合模式，花幾分鐘一起看看吧。

一、波浪的原理

首先可以分解一下波浪的原理，看似有點(diǎn)復(fù)雜，又是貝塞爾曲線，又是上下震動(dòng)，其實(shí)都是視覺錯(cuò)覺，本質(zhì)上是一個(gè)水平方向的周期性運(yùn)動(dòng)，曲線都是固定的，示意如下：

這下應(yīng)該能很直觀地觀察到動(dòng)畫的規(guī)律了，其實(shí)就是兩個(gè)半曲面，如下：

所以，問題就變成了，如何繪制兩個(gè)這樣的曲面？

二、曲面的繪制

提到曲面，可以想到徑向漸變，并且是橢圓的。

首先來看左邊這個(gè)曲面，其實(shí)就是一個(gè)透明到純色的徑向漸變，示意如下（可以想象成是一個(gè)透明的橢圓）。

用代碼實(shí)現(xiàn)就是。

div{
  background: radial-gradient(100% 57% at top ,#0000 100%,#2196F3 100.5%) no-repeat;
  background-size: 50% 100%;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

為了自適應(yīng)容器，這里都采用的是百分比單位，效果如下：

用同樣的方式，可以繪制出又半部分，為了方便管理，可以用 CSS 變量來代替。

div{
  --c: #2196F3;
  --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom,var(--c) 100%,#0000 100.5%) no-repeat;
  background: var(--w1),var(--w2);
  background-position: 0% 100%, 100% 100%;
  background-size: 50% 100%;
}

效果如下：

這個(gè)過程中，需要細(xì)微調(diào)整一下兩個(gè)曲面的位置關(guān)系，確保能夠完美的銜接在一起。

這樣，最關(guān)鍵的繪制就完成了。

三、波浪動(dòng)畫

最后就是動(dòng)畫了，其實(shí)就是一個(gè)重復(fù)水平運(yùn)動(dòng)，在這里只需要改變background-position-x就行了。

不過需要注意的是，為了保證動(dòng)畫的連貫性，需要再“復(fù)制”一份完全相同的，避免在動(dòng)畫首尾處出現(xiàn)“空檔”，如下（為了方便顏色，暫時(shí)用不同的顏色代替）。

這時(shí)，就體現(xiàn)出 CSS 變量的好處了，直接再寫兩個(gè)變量即可，如下：

div{
  --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, red 100%,#0000 100.5%) no-repeat;
  background: var(--w1),var(--w2),var(--w1),var(--w2); /*兩份*/
  background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  background-size: 50% 100%;
  animation: m 1s infinite linear; /*無限循環(huán)動(dòng)畫*/
}

然后是動(dòng)畫關(guān)鍵幀，改變background-position-x即可。

@keyframes m {
  0%  {background-position-x:-200%, -100%, 0%, 100%}
  100%{background-position-x:  0%, 100%, 200%, 300%}
}

這樣就得到了一個(gè)水平方向不斷位移的動(dòng)畫。

將顏色都改成相同后，由于看不清左右的運(yùn)動(dòng)，只能看到上下在晃動(dòng)，就感覺非常像一個(gè)波浪了。

下面是完整代碼，是不是非常少？

.wave{
  width: 400px;
  height: 200px;
  outline: 2px dashed gray;
  --c: #2196F3;
  --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;
  background: var(--w1),var(--w2),var(--w1),var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  animation: m 1s infinite linear;
}
@keyframes m {
  0%  {background-position-x:-200%, -100%, 0%, 100%}
  100%{background-position-x:  0%, 100%, 200%, 300%}
}

你也可以訪問以下任意鏈接：

CSS gradient wave (juejin.cn)^[3]
CSS gradient wave (codepen.io)^[4]
CSS gradient wave (runjs.work)^[5]

四、文字波浪動(dòng)畫

相比于其他實(shí)現(xiàn)，漸變的最大優(yōu)勢(shì)是不占用任何標(biāo)簽，包括偽元素，這樣即使在非常苛刻的情況下也能使用，比如文章開頭的文字波浪效果

由于只是背景，直接像普通的漸變文字那樣使用就行了，完整代碼如下：

.txt{
  --c: #2196F3;
  --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;
  background: var(--w1),var(--w2),var(--w1),var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  animation: m 1s infinite linear;
  font-size: 100px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text; /*文本裁切*/
  -webkit-text-stroke: 2px var(--c);
}
@keyframes m {
  0%  {background-position-x:-200%, -100%, 0%, 100%}
  100%{background-position-x:  0%, 100%, 200%, 300%}
}