使用css轉換更改導航欄顏色

Question

是否有每30秒更改導航欄顏色的轉換？ 這是我到目前為止所嘗試的：

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

Answer 1

使用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> 

Answer 2

使用這樣的超時：

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

來源： jQuery在一段時間后改變CSS

Answer 3

這叫做動畫。 嘗試這個：

.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％范圍內變化。

Answer 4

  * { 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>