[英]How to create an animated rainbow line using CSS or Javascript?
我想要的效果看起来像这样->
我想知道在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>
您将需要创建一个分隔线并使用CSS为其设置动画。
请参考已经建立的示例:
https://github.com/codepo8/CSS3-Rainbow-Dividers/blob/master/rainbows.css
源代码(在上面的链接上显示)
/*
* 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 */
对于开发者页面:
http://codepo8.github.io/CSS3-Rainbow-Dividers/
我没有创建这些,只是建议您去哪里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.