使用 CSS 循环颜色过渡

Question

我希望能够为我的网站背景颜色循环进行颜色转换，以便它在用户浏览时在两种略有不同的色调之间缓慢切换，以改变他们的浏览体验。我想要如下内容：

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

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

如果可能的话，我想在原版中做这个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。

Loop colour transition with CSS