CSS 渐变来实现波浪动画

FLY63

Gradual Wave

源码如下：

<div class="boxwarp">
	<div class="wave">FLY63</div>
	<div class="wave" style="--c: #F44336">css WAVE</div>
</div>

css：

<style>
.boxwarp{
  margin: 0;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: aliceblue;
}
.wave {
  --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%;
  }
}

</style>

波浪的原理，看似有点复杂，又是贝塞尔曲线，又是上下震动，其实都是视觉错觉，本质上是一个水平方向的周期性运动，曲线都是固定的。提到曲面，可以想到径向渐变，并且是椭圆的。

源码来自：https://codepen.io/xboxyan/pen/PoyrXdP

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1631