html - How to create an animated rainbow line using CSS or Javascript? - Stack Overflow

admin管理员组

文章数量:1324796

The effect I want looks like this ->

I was wondering whether there is an easier way to do this in 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?

The effect I want looks like this ->

I was wondering whether there is an easier way to do this in 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?

• javascript
• html
• css
• html5-canvas

Share Improve this question Follow edited Mar 28, 2015 at 9:39 Hanfei Sun asked Mar 28, 2015 at 9:34 Hanfei SunHanfei Sun 47.1k4141 gold badges135135 silver badges252252 bronze badges 4

• stackoverflow./questions/29007257/… – user1693593 Commented Mar 28, 2015 at 9:38
• @KenFyrstenberg I think that might be a different question because it needs to be implemented by html-canvas... – Hanfei Sun Commented Mar 28, 2015 at 9:48
• the question is tagged with html5-canvas – user1693593 Commented Mar 28, 2015 at 9:49
• @KenFyrstenberg yes.. I added html5-canvas only because it might be an option if pure css/js is unable to implement this.. – Hanfei Sun Commented Mar 28, 2015 at 9:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

Please refer to already established examples:

https://github./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:'廌'}

*/
/* ^ unment to add unicorn */ 

and for the developers page:

http://codepo8.github.io/CSS3-Rainbow-Dividers/

I didn't create these, merely advising you where to go.

本文标签： htmlHow to create an animated rainbow line using CSS or JavascriptStack Overflow