使用CSS循环颜色过渡

Question

我希望能够为我的网站的背景颜色循环颜色过渡，因此当用户浏览时，它会在两种略有不同的色调之间缓慢切换，以改变他们的浏览体验。我想要的东西如下：

.background {
  background-color: #00A0D6;
  transition: background-color: 100s;
}

但是background-color循环回#00A0D6，然后一旦到达#00B1D7就开始转换回#00A0D6。从用户浏览网站的那一刻起，我也希望这种情况自动发生。

如果可能的话，我想在vanilla CSS中这样做。如果没有，有没有办法使用Javascript循环以这种方式循环值？可能与jQuery库？我想尽可能保持平滑过渡的处理器效率最高的方法，因为这是一个在线RPG，它将同时进行许多其他过渡和数据库处理。

Answer 1

您可以使用CSS @keyframes来实现您的目标：

@keyframes changeColor {
    from {
        background-color: #00A0D6;
    }
    to {
        background-color: #00B1D7;
    }
}

然后将其与所需元素中的animation属性一起使用：

html, body {
    animation: changeColor 100s infinite alternate;
}

有关CSS关键帧的更多信息here。