用不同的阴影更改背景颜色

Question

I am trying to make a webpage with a background that changes color with the shades of the rainbow. I don't want any smooth transitions, I want them to change instantly. With shades, I mean it doesn't just go from red to orange to green etc, I mean it uses the shades of each color.

It's a bit difficult to explain, I got it from this website. If you hit 'inspect element' on the log in page, and then visit console, you'll see a bunch of rainbow text. The code used to achieve this is:

background:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet)

As you can see there, it's a bunch of different shades from each color in the code. How would I use this, but as a background of my webpage?

Answer 1

To instantly change the background color we can do it using jquery. See this link.

https://jsfiddle.net/9bcgw7x4/6/

$(document).ready(function(){
  var a = 1;
  var add =2;

  function changeBG(){
    var r = Math.floor((255 * a) / 100);  
    var g = Math.floor((255 * (100 - a)) / 100);
    var b = Math.floor((255 * a) / 100);  
    if(a<=0){
      add = 2;
    }else if(a>99){
      add=-2;
    }  
    a=a+add;    
    $('body').css('background-color', 'rgb('+r+','+g+','+b+')');
  }    
  setInterval(changeBG, 1000);

});

Answer 2

background changing with all the shades of the rainbow:

  setInterval(function () { document.body.style.background = "red"; setTimeout(function () { document.body.style.background = "orange" }, 1000); setTimeout(function () { document.body.style.background = "yellow" }, 2000); setTimeout(function () { document.body.style.background = "green" }, 3000); setTimeout(function () { document.body.style.background = "blue" }, 4000); setTimeout(function () { document.body.style.background = "indigo" }, 5000); setTimeout(function () { document.body.style.background = "violet" }, 6000); }, 1000); 

 body{ transition:background 1s linear; } 

background moving with the colors of the rainbow:

 body{ color:white } 

 <marquee scrollamount="20" style="position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index:-9999999;margin:0;padding:0"> <div style="width:200%;height:100vh;margin-left:-100%;background:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet,red,orange,yellow,green,blue,indigo,violet);"></div> </marquee> body body body body body body body body body body body body body body body body body 

Answer 3

try using transition-timing-function like step-start and step-end.

transition-timing-function: step-start;
transition-timing-function: step-end;

See the fiddle for understanding: https://jsfiddle.net/9bcgw7x4/5/

In the code at fiddle replace the background colours with your desired ones.

Updated

Answer 4

Below is an example of the code you're looking for. If you want it to apply to the whole page then you should add it to the body tag. I used http://www.colorzilla.com/gradient-editor/ to generate this code snippet.

body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,f9e759+0,f9e759+0,f9e759+0,f2f257+16,e85353+16,e85353+57,4239a0+57,4239a0+57,4239a0+83,66ff5b+83,66ff5b+83 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(left, #6db3f2 0%, #f9e759 0%, #f9e759 0%, #f9e759 0%, #f2f257 16%, #e85353 16%, #e85353 57%, #4239a0 57%, #4239a0 57%, #4239a0 83%, #66ff5b 83%, #66ff5b 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6db3f2 0%,#f9e759 0%,#f9e759 0%,#f9e759 0%,#f2f257 16%,#e85353 16%,#e85353 57%,#4239a0 57%,#4239a0 57%,#4239a0 83%,#66ff5b 83%,#66ff5b 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6db3f2 0%,#f9e759 0%,#f9e759 0%,#f9e759 0%,#f2f257 16%,#e85353 16%,#e85353 57%,#4239a0 57%,#4239a0 57%,#4239a0 83%,#66ff5b 83%,#66ff5b 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#66ff5b',GradientType=1 ); /* IE6-9 */ }

Here is an example with the colors you mentioned.

linear-gradient(to left, red 15%, orange 15%, orange 30%, yellow 30%, yellow 45%, green 45%, green 60%, blue 60%, blue 75%, indigo 75%, indigo 90%, violet 90%, violet)