时间戳

首页 > 解决方案 > 让球改变颜色

css - 让球改变颜色

问题描述

这是一个相对简单的问题，但我似乎看不出我在这里做错了什么。我只想让球在 0%、%50 和 %100 标记处从红色变为蓝色，再变为黄色。目前我没有看到任何变化。

谢谢你的帮助，

安娜

#ball {
  background-color: red;
  height: 50px;
  width:50px;
  border-radius: 50%;
  animation-name: ball;
  animation-duration: 4s;

  @keyframes ball{
    0% {
      background-color: red;
    }

    50% {
      background-color: blue;
    }

    100% {
      background-color: yellow;
    }
  }
}
<html>
  <body>
    <div id="ball">
  </div>
  </body>
</html>

标签： cssresponsive

解决方案

移出@keyframes你的球样式（除非你使用像 SASS 这样的 CSS 预处理器......）

#ball {
  background-color: red;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  animation-name: ball;
  animation-duration: 4s;
}

@keyframes ball {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}
<div id="ball"></div>

改用 SCSS 时，您可以：jsFiddle 示例

推荐阅读