使用CSS循环颜色过渡

时间:2016-06-04 11:14:25

标签: javascript jquery css css3 keyframe

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

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

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

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

1 个答案:

答案 0 :(得分:5)

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

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

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

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

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