[英]How to create an animated rainbow line using CSS or Javascript?
The effect I want looks like this -> 我想要的效果看起来像这样->
I was wondering whether there is an easier way to do this in css/js ? 我想知道在css / js中是否有一种更简单的方法? Or is there any library to implement it?
还是有实现它的库?
And what if the shape is not a straight line but an irregular curve line? 如果形状不是直线而是不规则曲线,该怎么办?
No t exactly like it but try this 不完全喜欢,但是尝试这个
.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>
With width reduced 宽度减小
.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>
You would need to create a divider and animate it using CSS. 您将需要创建一个分隔线并使用CSS为其设置动画。
Please refer to already established examples: 请参考已经建立的示例:
https://github.com/codepo8/CSS3-Rainbow-Dividers/blob/master/rainbows.css https://github.com/codepo8/CSS3-Rainbow-Dividers/blob/master/rainbows.css
for the source code (on the link above shows) 源代码(在上面的链接上显示)
/*
* 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 */
and for the developers page: 对于开发者页面:
http://codepo8.github.io/CSS3-Rainbow-Dividers/ http://codepo8.github.io/CSS3-Rainbow-Dividers/
I didn't create these, merely advising you where to go. 我没有创建这些,只是建议您去哪里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.