How to create an animated rainbow line using CSS or Javascript?


Tags: javascript,css,html5,css3,html5-canvas

Problem :

The effect I want looks like this ->

enter image description here

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?



Solution :

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>


    CSS Howto..

    How to avoid css overlapping?

    How can you print a page that has been altered by javascript?

    css: how to override max-width value with a larger (less restrictive) value

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How to add vertical scrolling to Windows 8 app in snapped view

    How to show CSS transitions only on hover?

    How to detect which button is clicked in javascript?

    How to cut the bottom overflow of page CSS/HTML

    css: How to add blank space under a sprint element

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to make div layer unselectable in jquery and css

    how can I fetch a website and overwrite some ot its html and css [closed]

    How can I get mobile safari to use the right CSS?

    How to convert template from table to div

    How to do taxonomy based css styling using drupal template.php?

    How to activate a CSS3 (webkit) animation using javascript?

    How to combine grouped inputs with aligned forms?

    How to push a div from the top in percentage with css?

    How can I apply CSS to elements created with javascript in IE?

    How to know if an element is rendered?

    How to toggle between display:none and display:block

    How to change CSS style without id or class

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    How do you scroll the page content over a cover image (like medium.com)?

    How to create custom horizontal radio buttons with CSS?

    How to set a div within text?

    How to put all Array values in $_GET[]

    Trying to show two different images depending on two media queries

    How to apply jquery ui styling on dynamically generated elements

    How to mask semi circles inside a rectangle and mask through css?