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

Question

我正在尝试制作一个背景的网页，该网页会随着彩虹的阴影而改变颜色。我不想要任何平滑的过渡，我希望它们立即改变。对于色调，我的意思是它不只是从红色到橙色再到绿色等，我的意思是它使用每种颜色的色调。

这有点难以解释，我是从这个网站上得到的。如果您在登录页面上点击"检查元素"，然后访问控制台，您将看到一堆彩虹文本。用于实现此目的的代码是：

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

正如你在那里看到的，它是代码中每种颜色的一堆不同色调。我将如何使用它，但作为我的网页的背景？

Answer 1

要立即更改背景颜色，我们可以使用 jquery 来完成。 请参阅此链接。

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

背景随着彩虹的所有阴影而变化：

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;
}

背景随彩虹的颜色移动：

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

下面是您要查找的代码示例。如果您希望它应用于整个页面，则应将其添加到 body 标签中。我使用 http://www.colorzilla.com/gradient-editor/来生成此代码片段。

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 */ }

这是您提到的颜色的示例。

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)

Answer 4

尝试使用过渡定时函数，如步进开始和步结束。

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

请参阅小提琴以了解：https://jsfiddle.net/9bcgw7x4/5/

在小提琴的代码中，将背景颜色替换为所需的背景颜色。

更新