JavaScript中的颜色风暴文本效果

有人能告诉我一个彩色风暴效果的JavaScript文本动画吗？我没有一个完美的例子/视频可以分享以增加清晰度。但是，下面的URL与我在中找到的很接近

实际要求是具有更像风暴的效果，即在颜色流入时垂直随机化颜色。并沿角色的高度不对称地分布颜色。让人感觉一场色彩风暴正在穿过的东西

任何指点都很感激

代码片段

//向跨元素添加动画延迟属性
var animTime=6，//动画的时间（秒）
hueChange=3，//色调从一个跨度元素更改为下一个跨度元素
前缀=[“”、“-webkit-”、“-moz-”、“-o-”]，
numPrefixes=前缀.length；
$（'.unicorn'）。查找（'span'）。每个（函数（i）{
对于（var j=0；j
.unicorn.animate span{
-webkit动画：彩色旋转6s线性0s无限；
-moz动画：彩色旋转6s线性0s无限；
-o-动画：彩色旋转6s线性0s无限；
动画：彩色旋转6s线性0s无限；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}
.独角兽：悬停跨度{
-webkit动画播放状态：正在运行；
-moz动画播放状态：正在运行；
-o-动画播放状态：正在运行；
动画播放状态：运行；
}
@-webkit关键帧颜色旋转{
从{
颜色：rgb（255,0,0）；
}
16.6% {
颜色：rgb（255,0255）；
}
33.3% {
颜色：rgb（0,0,255）；
}
50% {
颜色：rgb（0，255，255）；
}
66.6% {
颜色：rgb（0，255，0）；
}
83.3% {
颜色：rgb（255，255，0）；
}
到{
颜色：rgb（255,0,0）；
}
}
@-moz关键帧颜色旋转{
从{
颜色：rgb（255,0,0）；
}
16.6% {
颜色：rgb（255,0255）；
}
33.3% {
颜色：rgb（0,0,255）；
}
50% {
颜色：rgb（0，255，255）；
}
66.6% {
颜色：rgb（0，255，0）；
}
83.3% {
颜色：rgb（255，255，0）；
}
到{
颜色：rgb（255,0,0）；
}
}
@-o关键帧颜色旋转{
从{
颜色：rgb（255,0,0）；
}
16.6% {
颜色：rgb（255,0255）；
}
33.3% {
颜色：rgb（0,0,255）；
}
50% {
颜色：rgb（0，255，255）；
}
66.6% {
颜色：rgb（0，255，0）；
}
83.3% {
颜色：rgb（255，255，0）；
}
到{
颜色：rgb（255,0,0）；
}
}
@关键帧颜色旋转{
从{
颜色：rgb（255,0,0）；
}
16.6% {
颜色：rgb（255,0255）；
}
33.3% {
颜色：rgb（0,0,255）；
}
50% {
颜色：rgb（0，255，255）；
}
66.6% {
颜色：rgb（0，255，0）；
}
83.3% {
颜色：rgb（255，255，0）；
}
到{
颜色：rgb（255,0,0）；
}
}
Lorem ipsum door sit amet，Concetetur Adipising Elite。铜酸盐非流动性金属氧化物分子腐蚀
现在是平滑的


var$c=$（'.clip'）；
var-posX=0；
var-posY=0；
var timeout=Math.random（）*1000；
函数流（）{
log（[$c，posX，posY]）；
posX+=500；
posY+=500；
超时=Math.random（）*1000；
$c.css（'-webkit transition'，（timeout/1000）+'s linear'）；
$c.css（'background-position'，posX+'px'+posY+'px'）；
setTimeout（流，超时）
}
流（）
.clip{
字号：260px；
字体大小：粗体；
背景：重复线性梯度（-45度，#ff0000 0px，#00ff00 235.7px，#0000ff471.4px，#ff0000 707.1px）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
宽度：1000px；
高度：1000px；
}
.clip.d45{
背景：重复线性梯度（-45度，#ff0000 0px，#00ff00 235.7px，#0000ff471.4px，#ff0000 707.1px）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

背景剪辑剪辑
现在很平滑


var$c=$（'.clip'）；
var-posX=0；
var-posY=0；
var timeout=Math.random（）*1000；
函数流（）{
log（[$c，posX，posY]）；
posX+=500；
posY+=500；
超时=Math.random（）*1000；
$c.css（'-webkit transition'，（timeout/1000）+'s linear'）；
$c.css（'background-position'，posX+'px'+posY+'px'）；
setTimeout（流，超时）
}
流（）
.clip{
字号：260px；
字体大小：粗体；
背景：重复线性梯度（-45度，#ff0000 0px，#00ff00 235.7px，#0000ff471.4px，#ff0000 707.1px）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
宽度：1000px；
高度：1000px；
}
.clip.d45{
背景：重复线性梯度（-45度，#ff0000 0px，#00ff00 235.7px，#0000ff471.4px，#ff0000 707.1px）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

背景剪辑剪辑
差异是垂直的还是不对称的？某种程度上是这样的？嗯，不是。我要求在JSFIDLE示例中增加颜色流动的随机性。我分享的例子非常接近。我想你的意思是控制流动的速度，如果你想要一个准备好的随机化并循环这个剪辑，只需修改关键帧的百分比colorRotate，使一些颜色停留更长时间，如果你想要流动更快，流动更慢，你需要使用另一种方式，背景剪辑，我稍后会为它做一把小提琴我会等你的小提琴。然而，主要的问题是让多种颜色同时横向流动。想象一下，不同颜色的油漆桶从左边同时倒出。字母“L”的顶部可以是