Question

我对使用html和css进行编码非常陌生。我想做这个练习，我基本上在彼此内部创建了一堆盒子，然后使用按钮随机改变颜色。我挣扎了很多，将这三个盒子统一对齐。要求是在我的解决方案中使用绝对定位。

我的最终目标是将其中的10个彼此对齐，从而实现我的下一个目标。可以随机改变每种颜色吗？我正在考虑创建一个随机颜色生成器，并将它们的输出分别应用于每个div元素。

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>BOXES</title>
  </head>

  <body>
    <div id="first">
      <div id="second"></div>
      <div id="third"></div>
    </div>
  </body>

</html>

CSS

#first {
      width: 500px;
      height: 500px;
      background: red;
      position: absolute;
    }

    #first #second {
      position: absolute;
      width: 80%;
      height: 80%;
      background: green;
      margin: 10px;
    }

    #first #third {
      position: absolute;
      width: 60%;
      height: 60%;
      background: blue;
      margin: 20px;
    }

Answer 1

在这里，您希望这可以帮助您完成项目。仅使用HTML和CSS，不需要JS。 https://codepen.io/mary-ann-dul/pen/XqNGXO

HTML：

<div class="center">
  <div class="first">  
  </div>
    <div class="second">
  </div>
  <div class="third">
  </div>
</div>

CSS：

body {
     background-color: #fff;

}
@keyframes  random {
    15% { background-color: red; } 
    30% { background-color: yellow; } 
    45% { background-color: green; } 
    60% { background-color: blue; }
    75% { background-color: white; }  
}


.first
{
 background-color: #fff;
  width:500px;
  height:500px;
   margin:auto;
  position:absolute;
  top:0; bottom:0; left:0; right:10;
  transition: all 0.3s ease-out;
  -webkit-animation: random 3s infinite;
     animation: random 3s infinite;
}

.second
{
 background-color: #fff;
  width:300px;
  height:300px;
   margin:auto;
 position:absolute;
  top:50; bottom:60;   left:50; right:50;
  transition: all 0.9s ease-out;
  -webkit-animation: random 10s infinite;
     animation: random 10s infinite;
}
.third
{ 
  background-color: #fff;
  width:200px;
  height:200px;
   margin:auto;
 position:absolute;
  top:75; bottom:75;   left:75; right:75;
  transition: all 0.9s ease-out;
  -webkit-animation: random 15s infinite;
     animation: random 15s infinite;

}

在彼此内部创建嵌套的div容器并更改其颜色

1 个答案: