Html 使用css转换更改导航栏颜色

是否存在每30秒更改导航栏颜色的转换？ 以下是我迄今为止所尝试的：

.navbar {
    background-color: #080;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

---

使用这样的超时：

$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)

---

来源：

，称为动画。 试试这个：

.navbar {
    -webkit-animation-name: changeColorAnim;
    animation-name: changeColorAnim;
    -webkit-animation-duration: 90s;
    animation-duration: 90s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

@keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

如果你不想让它逐渐改变，那么在@keyframes里面放一些类似这样的东西：

49% { background-color: black }

---

将其更改为0%的颜色，也可以将其设置为99%，并保持99%与50%的颜色相同。这将使它保持相同的颜色，直到之前的1%，然后它将在这1%而不是50%的范围内发生变化。

使用

CSS3

动画，您可以做到这一点

下面给出的示例代码大约在30秒后改变颜色，并在不同颜色之间切换

#导航栏{
背景色：#080；
宽度：100%；
高度：100px；
动画：变色190s线性2s无限交替；
}
@关键帧改变颜色{
0%,
15% {
背景色：#080；
}
16%,
30% {
背景色：#F98A01；
}
31%,
45% {
背景色：#C61F83；
}
46%,
60% {
背景色：#DE9914；
}
61%,
75% {
背景色：#1EB6DC；
}
76%,
90% {
背景色：#0060A1；
}
91%,
100% {
背景色：#080；
}
}

*{
填充：0；
保证金：0；
}
div{
位置：固定；
宽度：100vw；
高度：20vh；
动画：changecolor 300s无限轻松输入输出；
}
@关键帧改变颜色{
0%,
9% {
背景色：黑色；
}
10%,
19% {
背景颜色：蓝色；
}
20%,
29% {
背景色：红色；
}
30%,
39% {
背景颜色：绿色；
}
40%,
49% {
背景色：青色；
}
50%,
59% {
背景色：洋红色；
}
60%,
69% {
背景颜色：黄色；
}
70%,
79% {
背景颜色：浅蓝色；
}
80%,
89% {
背景颜色：粉红色；
}
90%,
99% {
背景颜色：浅绿色；
}
100% {
背景色：黑色；
}

---

@CRover你听说过动画吗？我希望它能在这些颜色之间不断切换#F98A01、#C61F83、#DE9914、#1EB6DC、#0060A1，我该怎么做？很抱歉反应太晚，以防万一你还想知道，或者对于其他有同样问题的人，你会将代码从说黑色或白色改为说白色“背景色：#C61F83；”以及通过更改/添加更多百分比（而不是0%、50%和100%）来表示0%、20%、40%和添加60%、80%和100%，以满足您的5种颜色需求（100%和0%需要相同的颜色）。