Loop div背景顏色逐漸通過所有彩虹顏色| CSS

如何通過彩虹的所有顏色隨時間變化div的背景顏色，然後再次將其設置回原來的顏色和無限循環處理？Loop div背景顏色逐漸通過所有彩虹顏色| CSS

下面的代碼是我想要的結果，但在一個div中逐漸改變其顏色。

<div id="rainbow"></div>

.rainbow { 
 
background-color: blue; 
 
    float:left; 
 
    width: 70px; 
 
    height:70px; 
 
    border: 1px solid white; 
 
    
 
} 
 
.rainbow:first-child { 
 
background-color: red; 
 
} 
 
.rainbow:nth-child(2) { 
 
background-color: orange; 
 
}.rainbow:nth-child(3) { 
 
background-color: yellow; 
 
}.rainbow:nth-child(4) { 
 
background-color: Chartreuse; 
 
}.rainbow:nth-child(5) { 
 
background-color: cyan; 
 
}.rainbow:nth-child(6) { 
 
background-color: blue; 
 
}.rainbow:nth-child(7) { 
 
background-color: DarkOrchid; 
 
}.rainbow:nth-child(8) { 
 
background-color: DeepPink; 
 
}.rainbow:nth-child(9) { 
 
background-color: red; 
 
} 
 
.rainbow:last-child { 
 
background-color: Chartreuse; 
 
    float:left; 
 
    border: 1px solid white; 
 
    clear:both; 
 
}

<div class="rainbow">Original color</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">Come back to red and loop</div> 
 
<br style="clear:both"> 
 
All of the above in just one div

來源

2016-09-27 TSR

您可以創建CSS動畫改變背景顏色。爲了使動畫循環，您可以添加infinite並獲得色彩平滑過渡，你可以使用linear

div { 
 
    background-color: #FF0000; 
 
    animation: bgColor 5s infinite linear; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
@keyframes bgColor { 
 
    12.5% { 
 
    background-color: #FF0000; 
 
    } 
 
    25% { 
 
    background-color: #FFA500; 
 
    } 
 
    37.5% { 
 
    background-color: #FFFF00; 
 
    } 
 
    50% { 
 
    background-color: #7FFF00; 
 
    } 
 
    62.5% { 
 
    background-color: #00FFFF; 
 
    } 
 
    75% { 
 
    background-color: #0000FF; 
 
    } 
 
    87.5% { 
 
    background-color: #9932CC; 
 
    } 
 
    100% { 
 
    background-color: #FF1493; 
 
    } 
 
}

<div></div>

來源

2016-09-27 13:19:30

謝謝！這就是我一直在尋找的！ – TSR

不客氣。 –

您需要使用關鍵幀動畫CSS

#rainbow { 
 
background-color: blue; 
 
    float:left; 
 
    width: 70px; 
 
    height:70px; 
 
    border: 1px solid white; 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes example { 
 
    0% {background-color: red; } 
 
    25% {background-color: yellow; } 
 
    50% {background-color: blue; } 
 
    75% {background-color: green; } 
 
    100% {background-color: red; } 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {background-color: red; } 
 
    25% {background-color: yellow; } 
 
    50% {background-color: blue; } 
 
    75% {background-color: green; } 
 
    100% {background-color: red; } 
 
}

<div id="rainbow"></div>

來源

2016-09-27 13:20:22 sailens

你可以實現這一目標關鍵幀

.rainbow { 
 
    float:left; 
 
    width: 70px; 
 
    height:70px; 
 
    border: 1px solid white; 
 
    
 
} 
 

 
.rainbow:last-child { 
 
    float:left; 
 
    border: 1px solid white; 
 
    clear:both; 
 
} 
 
@keyframes color { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    10% { 
 
    background-color: orange; 
 
    } 
 
    20% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: Chartreuse; 
 
    } 
 
    40% { 
 
    background-color: cyan; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: DarkOrchid; 
 
    } 
 
    70% { 
 
    background-color: DeepPink; 
 
    } 
 
    80% { 
 
    background-color: red; 
 
    } 
 
    90% { 
 
    background-color: red; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 

 
.rainbow { 
 
    animation: color 8s infinite; 
 
}

<div class="rainbow">Original color</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div> 
 
<div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">Come back to red and loop</div> 
 
<br style="clear:both"> 
 
All of the above in just one div

來源

2016-09-27 13:21:23

Loop div背景顏色逐漸通過所有彩虹顏色| CSS

回答

相關問題