[分享]css中div随机变色

CSS中，元素是最常用的容器。它可以用来包裹其他元素，将它们放在同一个区域内。但是，它也可以变得更加有趣。有时候，我们希望页面上的某些元素可以随机变换颜色。这个时候，我们可以使用CSS中的backgr...

CSS中，

<div>

有时候，我们希望页面上的某些元素可以随机变换颜色。这个时候，我们可以使用CSS中的background-color属性，结合JavaScript的Math.random()函数来实现。

 /* HTML */
    <div id="box"></div>
  
    /* CSS */
    #box {
      width: 100px;
      height: 100px;
      background-color: teal;
    }
  
    /* JavaScript */
    var box = document.getElementById("box");
  
    function randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var color = "rgb(" + r + "," + g + "," + b + ")";
      return color;
    }
  
    setInterval(function() {
      box.style.backgroundColor = randomColor();
    }, 1000); 

在上面的代码中，我们首先定义了一个<div>元素，它的background-color属性初始值为teal。

接着，我们使用JavaScript中的setInterval()函数，每秒钟随机更换一次background-color的值。

在randomColor()函数中，我们使用了Math.random()函数和Math.floor()函数来获取三个随机数（r、g、b），并将它们拼接成一个rgb颜色字符串。

最后，我们将随机生成的颜色值赋给了<div>元素的background-color属性。

通过这种方式，<div>元素的背景色会不断变换，形成一个有趣的效果。