使用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关键帧的信息.