Question

这是CSS代码

@keyframes anim{
  0% {background-color: red; top: 0px; }
  100% {background-color: yellow; top: calc(100vh - 110px);}
}

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  position: relative;
  display: none;
}


#button {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  position: relative;
}

#button:target {
  animation-name: anim;
  animation-duration: 3s;
  animation-fill-mode: forwards;  

}

和HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      CSS anim
    </title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class='circle'>
  </div>
  <a href="#button">
    <div id="button">
    </div>
  </a>
  </body>
</html>

因此，当我点击#button div（忽略.circle）时，它会向下移动并保持在动画中。但它不会改变颜色。为什么以及如何解决它？

css动画移动但不改变颜色

0 个答案: