我想要的效果是这样的->
我想知道在 css/js 中是否有更简单的方法来做到这一点?或者是否有任何库来实现它?
如果形状不是直线而是不规则的曲线怎么办?
最佳答案
不太喜欢,但试试这个
.rainbow{
width:200px;
height:20px;
background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
background-repeat:repeat-x;
-webkit-animation:go 1s linear infinite;
-moz-animation:go 1s linear infinite;
-o-animation:go 1s linear infinite;
-ms-animation:go 1s linear infinite;
animation:go 1s linear infinite;
}
@-webkit-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@-moz-keyframes go{
0%{background-position:0;}
50%{background-position:100px 0;}
100%{background-position:200px 0;}
}
@-o-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@-ms-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
<div class="rainbow"></div>
宽度减小
.rainbow{
width:200px;
height:5px;
background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
background-repeat:repeat-x;
-webkit-animation:go 1s linear infinite;
-moz-animation:go 1s linear infinite;
-o-animation:go 1s linear infinite;
-ms-animation:go 1s linear infinite;
animation:go 1s linear infinite;
}
@-webkit-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@-moz-keyframes go{
0%{background-position:0;}
50%{background-position:100px 0;}
100%{background-position:200px 0;}
}
@-o-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@-ms-keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
@keyframes go{
0%{background-position:0;}
100%{background-position:200px 0;}
}
<div class="rainbow"></div>
关于javascript - 如何使用 CSS 或 Javascript 创建动画彩虹线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29315589/