我希望能够为我的网站的背景颜色循环颜色过渡,因此当用户浏览时,它会在两种略有不同的色调之间缓慢切换,以改变他们的浏览体验。我想要的东西如下:
.background {
background-color: #00A0D6;
transition: background-color: 100s;
}
但是background-color
循环回#00A0D6
,然后一旦到达#00B1D7
就开始转换回#00A0D6
。从用户浏览网站的那一刻起,我也希望这种情况自动发生。
如果可能的话,我想在vanilla CSS中这样做。如果没有,有没有办法使用Javascript循环以这种方式循环值?可能与jQuery库?我想尽可能保持平滑过渡的处理器效率最高的方法,因为这是一个在线RPG,它将同时进行许多其他过渡和数据库处理。
答案 0 :(得分:5)
您可以使用CSS @keyframes
来实现您的目标:
@keyframes changeColor {
from {
background-color: #00A0D6;
}
to {
background-color: #00B1D7;
}
}
然后将其与所需元素中的animation
属性一起使用:
html, body {
animation: changeColor 100s infinite alternate;
}
有关CSS关键帧的更多信息here。