CSS动画：

Question

今天我访问了this网站，看起来很棒的是我尝试搜索changebackground()时改变背景颜色的功能，但找不到它，请你告诉我怎么做。

Answer 1

每次间隔通话。

setInterval(intr,2000);

function intr()
{
document.body.style.backgroundColor="#colorInHex";
}

注意我已编辑此帖子以通过引用调用间隔函数。请阅读道格拉斯·克罗克福德（Douglas crockford）的评论，以获得更全面的解释。

Answer 2

CSS动画：

除了Opera Mini之外，所有浏览器上的CSS动画都是currently supported。它利用硬件加速，是JavaScript动画的首选。实际上，如果浏览器不支持它，jQuery动画会尝试使用CSS3动画并回退到JS。

您可以直接使用此代码并将其放入。请参阅FIDDLE here。

body {
  animation: colorchange 50s; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 50s; /* Chrome and Safari */
}

@keyframes colorchange
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}

您引用的网站使用10秒转换，因此我使用了颜色数（5）并将其乘以10秒以达到50秒的动画持续时间。

然后你取步数或颜色数（5）减去1（对于0％），所以现在是4，然后将它除以100，那么25.这给你步距，所以从0开始5步100％：0％，25％，50％，75％，100％。

由于请求非常简单，我只使用了颜色名称。它们不具体，对浏览器/操作系统解释持开放态度。如果您想要更多特定颜色，可以使用this color generator并将颜色名称替换为其中一个值。

原始答案：

CSS转换：

此网站使用CSS过渡。声明：

* {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
  }

然后定义一些颜色类，如：

.green {
    background-color: rgba(0,255,0,1);
}
.red {
    background-color: rgba(255,0,0,1);
}
.blue {
    background-color: rgba(0,0,255,1);
}

然后在body标签上设置不同的类，这将导致这样的转换，因为您最初定义的转换CSS

编辑：我稍微错过了。这是身体标签上的ACTUAL过渡：

transition: all 10s ease-in-out;

当然，正在使用定时器上的JS设置主体上的CSS颜色，但这是一个简单的操作，CSS完成大部分工作，你可以通过简单地设置类而不是通过设置来更优雅地完成它bg颜色直接用脚本。

Answer 3

<head>
<script type="text/javascript" language="javascript">


/* Method To Generate Random Numbers Between "0-255" for RGB Color-code Format & Assign To Body-Backgrond-Style */

function bgDisco()
{
var  x =Math.round(255*Math.random());

var num1 =getHex(x);

var  y =Math.round(255*Math.random());

var num2 =getHex(y);

var  z =Math.round(255*Math.random());

var num3 =getHex(z);

document.body.style.background="#"+num1+num2+num3;

setTimeout("bgDisco",1000);
}

/* Method To Convert  Decimal To Hexadecimal */

function getHex(dec)
{
var hexArray = new Array( "0", "1", "2", "3","4", "5", "6", "7","8", "9", "A", "B","C", "D", "E", "F" );

var code1 = Math.floor(dec / 16);

var code2 = dec - code1 * 16;

var decToHex = hexArray[code2];

return (decToHex);
}
</script>
</head>

现在在body部分调用onload事件中的“bgDisco（）”。

<body onload="bgDisco()">

Answer 4

如果查看页面代码，您会看到：

<body onload="prettyPrint(); changebackground();" id="main">

我将挖掘一个我将在这里发布的changebackground（）函数。我想那就是你想要的。

Answer 5

这就是我要找的东西：

<style>
body {
    background: #fff;
    background-color: rgb(145, 207, 161);
    font-family: 'Raleway', sans-serif;
    transition: all 10s ease-in-out;
}

* {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
</style><script type="text/javascript">
function cb()
{
var c = "#1abc9c #2ecc71 #3498db #ea5b4d #9b59b6 #34495e #16a085 #27ae60 #2980b9 #8e44ad #2c3e50 #f1c40f #e67e22 #e74c3c #f39c12 #d35400 #c0392b #06b3db #4ed486 #6139f6 #e3b63d #dc3d66 #bd3559 #bd54cd #0082c8 #16528e #e54b4b #a2c5bf #167c80 #72616e #e8846b #ea5b4d #72BDC2".split(" ");
var d = Math.floor(Math.random() * c.length); 
d = c[d];
document.body.style.background=d;
setTimeout("cb()",1000);}
</script>
<body onload="cb()">

如何在一个间隔内更改我的网站的背景颜色

5 个答案:

CSS动画：

原始答案：

CSS转换：