如何添加单独的背景动画？答案

【问题标题】：How do I add a separate background animation?如何添加单独的背景动画？
【发布时间】：2021-06-04 16:58:16
【问题描述】：

我正在为学校做这个项目，我需要知道如何使用我制作的这个单独的背景动画。

我尝试做一个单独的 DIV 块，但到目前为止没有运气。谁能帮帮我？

这是我当前的代码：

.bg {
  animation: bg;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@keyframes bg {
  0% {
    background-color: hsl(180, 100%, 90%)
  }
  17% {
    background-color: hsl(240, 100%, 90%)
  }
  34% {
    background-color: hsl(300, 100%, 90%)
  }
  51% {
    background-color: hsl(0, 100%, 90%)
  }
  68% {
    background-color: hsl(60, 100%, 90%)
  }
  85% {
    background-color: hsl(120, 100%, 90%)
  }
  100% {
    background-color: hsl(180, 100%, 90%)
  }
}

<div class="bg" />
<div class="question">
  <h1>Baseball Quiz</h1>
  <h3>Made by Lordust</h3>
  <p>
    <a href="xhtml/question1.xhtml">Click here to start</a>
  </p>
</div>

【问题讨论】：

标签： css animation background

【解决方案1】：

添加

.bg {
    animation: bg;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

@keyframes bg {
  0% {background-color:hsl(180, 100%, 90%)}
  17% {background-color:hsl(240, 100%, 90%)}
  34% {background-color:hsl(300, 100%, 90%)}
  51% {background-color:hsl(0, 100%, 90%)}
  68% {background-color:hsl(60, 100%, 90%)}
  85% {background-color:hsl(120, 100%, 90%)}
  100% {background-color:hsl(180, 100%, 90%)}
}

    <head>
        <title>Baseball quiz</title>
        <link href="css/style.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="bg"/>
        <div class="question">
            <h1>Baseball Quiz</h1>
            <h3>Made by Lordust</h3>
            <p>
                <a href="xhtml/question1.xhtml">Click here to start</a>
            </p>
        </div>
    </body>

animation-duration: 4s;

在 bg 类中。

【讨论】：