文字效果用背景渐变实现波浪背景文字

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

文字效果用背景渐变实现波浪背景文字

2023-06-08 09:58:21 来源：博客园

(资料图片仅供参考)

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，《这个文字波浪动画，真酷！》

关键词：

文字效果 用背景渐变实现 波浪背景文字

文字效果用背景渐变实现波浪背景文字