1. 实现波浪背景
div{
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%}
}
原理：透明到纯色的径向渐变，然后复制该渐变背景，最后加上背景水平方向移动的无限循环动画
2. 文字波浪背景
将该渐变应用在文本标签上，并添加一下css属性
{
font-size: 100px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text; /*文本裁切*/
-webkit-text-stroke: 2px var(--c); /*文本内描边*/
}
最后，在做一些适当调整，比如弧度衔接处 动画时间等 。搞定
3. 总结
- 波浪的本质上是一个曲面在水平方向的周期性运动，曲面本身并没有变化
- 波浪可以拆分为两个不同方向上的径向渐变
- 特别需要注意渐变的尺寸和位置，确保能够完美的衔接在一起
- 动画其实就是不断改变渐变的水平位置，也就是
background-position-x - 相比于其他实现，渐变的最大优势是不占用任何标签
- 还可以轻易的实现文字波浪效果
注：文章来源于前端侦探 ，作者XboxYan，《这个文字波浪动画，真酷！》
标签：--,背景,100%,波浪,文字效果,background,var,渐变 From： https://www.cnblogs.com/salayang/p/17465363.html