是否存在每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