如何使用CSS或Javascript创建动画彩虹线？

我想要的效果如下->

我想知道在css/js中是否有更简单的方法来实现这一点？或者有没有实现它的库

---

如果形状不是一条直线而是一条不规则的曲线怎么办？

您需要创建一个分隔符，并使用CSS设置其动画

请参考已建立的示例：

对于源代码（在上面显示的链接上）

对于开发者页面：

---

我没有创造这些，只是建议你去哪里

不，我不是很喜欢，但是试试这个

.rainbow{
宽度：200px；
高度：20px；
背景：-webkit线性梯度（左、红、橙、黄、绿、蓝、靛、紫）；
背景：-莫兹线性梯度（左，红色，橙色，黄色，绿色，蓝色，靛蓝，紫色，红色）；
背景：-o-线性梯度（左、红色、橙色、黄色、绿色、蓝色、靛蓝、紫色、红色）；
背景：-ms线性梯度（左侧、红色、橙色、黄色、绿色、蓝色、靛蓝、紫色、红色）；
背景：线性渐变（向右，红色，橙色，黄色，绿色，蓝色，靛蓝，紫色，红色）；
背景重复：重复-x；
-webkit动画：Go1s线性无限；
-moz动画：go 1s线性无限；
-o-动画：go 1s线性无限；
-ms动画：go 1s线性无限；
动画：Go1s线性无限；
}
@-webkit关键帧开始{
0%{背景位置：0；}
100%{背景位置：200px 0；}
}
@-moz关键帧开始{
0%{背景位置：0；}
50%{背景位置：100px 0；}
100%{背景位置：200px 0；}
}
@-o关键帧开始{
0%{背景位置：0；}
100%{背景位置：200px 0；}
}
@-ms关键帧开始{
0%{背景位置：0；}
100%{背景位置：200px 0；}
}
@关键帧开始{
0%{背景位置：0；}
100%{背景位置：200px 0；}
}

---

@KenFyrstenberg我认为这可能是一个不同的问题，因为它需要通过html画布实现……这个问题用html5标记-canvas@KenFyrstenberg对我添加html5画布只是因为如果纯css/js无法实现这一点，它可能是一个选项。记住要支持非webkit浏览器（ff中没有显示）@KenFyrstenberg抱歉只是一个minute@KenFyrstenberg现在怎么样？我建议您添加

动画计时功能：线性

，并在末尾重复

红色

颜色。@HashemQolami好的，我添加了它。谢谢

/*
 * CSS animated rainbow dividers of awesome 
 * by Chris Heilmann @codepo8 and Lea Verou @leaverou 
**/
@-moz-keyframes charlieeee {
  from { background-position:top left; } 
  to {background-position:top right; }
}
@-webkit-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-o-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-ms-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-khtml-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
.catchadream{
  background-image:-webkit-linear-gradient( left, red, orange, yellow, green,
                                          blue, indigo, violet, indigo, blue,
                                          green, yellow, orange, red );
  background-image:-moz-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-o-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-ms-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-khtml-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  -moz-animation:charlieeee 2.5s forwards linear infinite;
  -webkit-animation:charlieeee 2.5s forwards linear infinite;
  -o-animation:charlieeee 2.5s forwards linear infinite;
  -khtml-animation:charlieeee 2.5s forwards linear infinite;
  -ms-animation:charlieeee 2.5s forwards linear infinite;
  -lynx-animation:charlieeee 2.5s forwards linear infinite;
  animation:charlieeee 2.5s forwards linear infinite;
  background-size:50% auto;
}
#tongue{position:cheek;}
/* ^ OMG! An ID! That kills performance! */

/*
  .catchadream:after{content:'廌'}

*/
/* ^ uncomment to add unicorn */