Question

我正在创建一个约会网站来学习网络开发，但我不知道如何使背景颜色起作用，它只是不适用于特定的 div。我应该改变什么？我尝试了很多东西，但什么也没发生。

添加lorem ipsum所以我可以问这个问题......跳过这个

<块引用>

Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。 Morbi ut felis magna。 Cras lectus sapien，porttitor quis elit id，lacinia pellentesque urna。 Fusce gravida felis sat amet purus mattis, sed faucibus turpis hendrerit。整数 convallis sagittis pulvinar。 Curabitur tristique faucibus lorem iaculis egestas。 Vivamus vitae lacus placerat, efficitur diam et, volutpat augue。 Cras at purus vitae neque ultricies iaculis。 Maecenas pellentesque ipsum nisi。

我的代码：

* {
  padding: 0;
  margin: 0;
  color: black;
}

body {
  overflow: hidden;
}

.container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 95%;
  height: 750px;
}

nav {
  display: flex;
  justify-content: space-between;
  font-family: 'Pattaya', sans-serif;
  font-size: 39px;
}

.logo {
  cursor: pointer;
  margin-top: auto;
  margin-bottom: auto;
}

.menu {
  margin-top: auto;
  margin-bottom: auto;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  padding: 30px;
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ede;
  border-radius: 10px;
}

.circle {
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ede;
  clip-path: circle(600px at right 800px);
}

.circlebig {
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ede;
  clip-path: circle(940px at left);
}

.content {
  display: flex;
  justify-content: space-between;
  font-family: 'Rubik', sans-serif;
  font-size: 56px;
}

.text {
  transform: translateY(25%);
}

.love {
  font-size: 70px;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 400s linear infinite;
}

@keyframes move {
  to {
    background-position: 4500vh;
    
}

.freeplan {
  z-index: 3;
  display: block;
  background-color: #666 !important;
}

.paidplan {
  z-index: 3;
  display: block;
  background-color: #35f !important;
}

<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300&display=swap" rel="stylesheet">
<main>
  <div class="container">
    <nav>
      <div class="logo">
        <a href="index.html"><img src="img/logo.png"></a>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#"> &#8291 &#8291 Plans &#8291 &#8291 </a></li>
          <li><a href="#"> &#8291 &#8291 About &#8291 &#8291 </a></li>
          <li><a href="#"> &#8291 &#8291  Login &#8291 &#8291 </a></li>
        </ul>
      </div>
    </nav>
    <section class="content">
      <div class="freeplan">
        Freeplan
        <img src="img/kiss.png">
      </div>
      <div class="paidplan">
        Paidplan
        <img src="img/kiss.png">
      </div>
      <img src="img/kiss.png">
    </section>
    <div class="circle"></div>
    <div class="circlebig"></div>
  </div>
</main>

Answer 1

您没有关闭大括号：

  @keyframes move {
    to {
        background-position: 4500vh;
    } // <==
  }

Answer 2

我认为您可能会错过“@keyframes”大括号。请像我的代码一样替换@keyframes。

@keyframes move {
    to {
        background-position: 4500vh;
    }
}

Answer 3

换掉就好了

 @keyframes move {
          to {
            background-position: 4500vh;
          }
       }

为什么背景颜色对我不起作用？

3 个答案: