乐趣区

关于前端:使用-CSS-渐变来实现波浪动画

之前看到 coco 的这样一篇文章:纯 CSS 实现波浪成果!,十分奇妙,通过扭转 border-radius 和一直旋转实现的波浪成果,有趣味的能够去钻研一下。

这次尝试一下应用 CSS 突变来实现这样一个成果,还能够用在文字背景上,如下

不须要混合模式,花几分钟一起看看吧

一、波浪的原理

首先能够合成一下波浪的原理,看似有点简单,又是贝塞尔曲线,又是高低触动,其实都是视觉错觉,实质上是一个 程度方向的周期性静止,曲线都是固定的,示意如下

这下应该能很直观地察看到动画的法则了,其实就是两个半曲面,如下

所以,问题就变成了,如何绘制两个这样的曲面?

二、曲面的绘制

提到曲面,能够想到径向突变,并且是椭圆的。

首先来看右边这个曲面,其实就是一个通明到纯色的径向突变,示意如下(能够设想成是一个通明的椭圆)

用代码实现就是

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;
}

为了自适应容器,这里都采纳的是百分比单位,成果如下

用同样的形式,能够绘制出又半局部,为了方便管理,能够用 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%;
}

成果如下

这个过程中,须要轻微调整一下两个曲面的地位关系,确保可能完满的连接在一起

这样,最要害的绘制就实现了

三、波浪动画

最初就是动画了,其实就是一个反复程度静止,在这里只须要扭转 background-position-x 就行了。

不过须要留神的是,为了保障动画的连贯性,须要再“复制”一份完全相同的,防止在动画首尾处呈现“空档”,如下(为了不便色彩,临时用不同的色彩代替)

这时,就体现出 CSS 变量的益处了,间接再写两个变量即可,如下

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; /* 有限循环动画 */
}

而后是动画关键帧,扭转 background-position-x 即可

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

这样就失去了一个程度方向一直位移的动画

将色彩都改成雷同后,因为看不清左右的静止,只能看到高低在晃动,就感觉十分像一个波浪了

上面是残缺代码,是不是非常少?

.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 (codepen.io)
  • CSS gradient wave (runjs.work)

四、文字波浪动画

相比于其余实现,突变的最大劣势是不占用任何标签,包含伪元素,这样即便在十分刻薄的状况下也能应用,比方文章结尾的文字波浪成果

因为只是背景,间接像一般的突变文字那样应用就行了,残缺代码如下

.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%}
}

之前在这篇文章:CSS & SVG foreignObject 实现文字镂空波浪动画中用到了 SVG foreignObject 实现的,有趣味的能够回顾一下

你也能够拜访以下任意链接:

  • CSS gradient wave text (codepen.io)
  • CSS gradient wave text (runjs.work)

五、总结一下

以上就是全部内容了,置信实现起来没有太多的难点,次要就是径向突变的使用,上面总结一下

  1. 波浪的实质上是一个曲面在程度方向的周期性静止,曲面自身并没有变动
  2. 波浪能够拆分为两个不同方向上的径向突变
  3. 特地须要留神突变的尺寸和地位,确保可能完满的连接在一起
  4. 动画其实就是一直扭转突变的程度地位,也就是 background-position-x
  5. 相比于其余实现,突变的最大劣势是不占用任何标签
  6. 还能够轻易的实现文字波浪成果

个别同样的成果我都会尽量用多种形式去实现,每种形式都有各自不同的优缺点,以便于应答各自不同的利用场景。最初,如果感觉还不错,对你有帮忙的话,欢送点赞、珍藏、转发❤❤❤

退出移动版