有啥方法可以实现一行文字形成浪涌变色的效果？

Question

一行文字，需要实现文字颜色从前到后形成浪涌渐变色效果？
有推荐的方法吗？
CSS,JQUERY,js等方式都可以

Answer 1

你说的是这个效果吗？前几天刚好写了这样一篇文章

https://segmentfault.com/a/1190000043861422

效果是这样的

Answer 2

你说的css、js、jquery这三种都可以实现，下面列举两种方法可供你参考一下：
1、可以使用CSS的线性渐变（linear-gradient）来实现文字颜色的浪涌渐变效果。具体代码如下：

background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
其中，linear-gradient的参数to right表示从左到右渐变，后面的颜色值依次为红、橙、黄、绿、蓝、靛、紫。-webkit-background-clip: text和-webkit-text-fill-color: transparent则是将背景色设置为文字颜色的渐变效果。

2、可以使用JavaScript来实现文字颜色的浪涌渐变效果。具体代码如下：
const text = document.querySelector('.text');
const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#8b00ff'];
let index = 0;
setInterval(() => {
text.style.color = colors[index];
index = (index + 1) % colors.length;
}, 1000);
其中，text为需要实现渐变效果的文字元素，colors为颜色数组，index为当前颜色的索引。使用setInterval函数每隔一段时间改变文字颜色，实现渐变效果。

Answer 3

CSS 实现:

<h1 class="article-header--title">A Deep CSS Dive Into Radial And Conic Gradients</h1>

body {
  background-color: #0e2730;
}
:root {
    --rainbow-gradient: linear-gradient(-90deg,#adfbda 0,#35c3ff 30%,#fda399 50%,#76d880 70%,#ebf38b 90%,#adfbda 100%);
}
.article-header--title {
  background-image: var(--rainbow-gradient,#fff);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow(0 0 2rem #000);
  text-shadow: none!important;
}

https://www.iicoom.top/posts/49

Answer 4

HTML：

<p id="wave-text">This is a wave text.</p>

CSS样式：

@keyframes wave {
  0% {color: red;}
  50% {color: yellow;}
  100% {color: red;}
}

#wave-text {
  animation-name: wave;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline;
}

JS代码：

let textElement = document.getElementById('wave-text');
let text = textElement.textContent;
textElement.textContent = '';


for(let i = 0; i < text.length; i++) {
  let newSpan = document.createElement('span');
  newSpan.textContent = text[i];
  newSpan.style.animationDelay = (i * 0.2) + 's';
  textElement.appendChild(newSpan);
}