文字效果用背景渐变实现波浪背景文字-Toy模板网

这篇具有很好参考价值的文章主要介绍了文字效果用背景渐变实现波浪背景文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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); /*文本内描边*/
}