首页>Program>source

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

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

这是我当前的代码:

xHTML:
    <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>
CSS:
.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%)}
}
最新回答
  • 26天前
    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类中。

  • javascript:在1行中调用三元运算符的值
  • passport.js:NestJS快速验证