是否存在每30秒更改一次导航栏颜色的转换？ 这里是我到目前为止已经试过：用css转换更改导航栏颜色
.navbar {
background-color: #080;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
使用CSS3动画，你可以做到。
以下给出的示例代码大约在30秒后改变颜色，并在不同颜色之间切换。
#navbar {
background-color: #080;
width: 100%;
height: 100px;
animation: changeColour 190s linear 2s infinite alternate;
}
@keyframes changeColour {
0%,
15% {
background-color: #080;
}
16%,
30% {
background-color: #F98A01;
}
31%,
45% {
background-color: #C61F83;
}
46%,
60% {
background-color: #DE9914;
}
61%,
75% {
background-color: #1EB6DC;
}
76%,
90% {
background-color: #0060A1;
}
91%,
100% {
background-color: #080;
}
}<div id="navbar"></div>使用这样的超时：
$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)
这就是所谓的动画。如果你希望它不会改变逐渐然后把的@keyframes像这里面
.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 }
}
： 试试这个
49% { background-color: black }
在0％改变它的颜色，你也可以把它放在99％，保持99％的颜色与50％相同。这使它保持相同的颜色直到1％之前，然后在1％而不是50％的范围内变化。
我希望它能够在这些颜色之间切换＃F98A01，＃C61F83，＃DE9914，＃1EB6DC，＃0060A1，我该怎么做？ – stephjhonny
对不起，如果你仍然想知道，或者对于其他人有同样的问题，你会改变代码从黑色或白色说“背景颜色：＃C61F83;”也可以通过改变/添加更多的百分比而不是0％，50％和100％来表示0％，20％，40％，并添加60％，80％，100％来满足您的5种颜色需求（100％和0％需要相同的颜色）。 –
* {
padding: 0;
margin: 0;
}
div {
position: fixed;
width: 100vw;
height: 20vh;
animation: changecolor 300s infinite ease-in-out;
}
@keyframes changecolor {
0%,
9% {
background-color: black;
}
10%,
19% {
background-color: blue;
}
20%,
29% {
background-color: red;
}
30%,
39% {
background-color: green;
}
40%,
49% {
background-color: cyan;
}
50%,
59% {
background-color: magenta;
}
60%,
69% {
background-color: yellow;
}
70%,
79% {
background-color: lightblue;
}
80%,
89% {
background-color: pink;
}
90%,
99% {
background-color: lightgreen;
}
100% {
background-color: black;
}<div class="navbar"></div>
@CRover你有没有听说过动画？ – Banzay