如何<label>隨時間動態</label>更改<label>HTML中的</label>顏色

Question

我如何編寫代碼以動態更改html中元素的顏色。 例如：如果Hello是標簽，則從頭2秒開始應將顏色更改為黃色，然后更改為綠色，以此類推，並具有過渡效果。謝謝

Answer 1

animation可以做到這一點：

 label { animation:colorchg 2s infinite; color:green } @keyframes colorchg { 50% { color:red; } } 

 <label>color</label> 

Answer 2

如何使用CSS3動畫。 我從W3Schools獲得了這個概念。 看看這個

您可以通過除以百分比來添加更多背景色。

 label { background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 1s; animation-delay: 1s; animation-iteration-count: infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red; } 25% {background-color:yellow; } 50% {background-color:blue; } 75% {background-color:green; } 100% {background-color:red; } } /* Standard syntax */ @keyframes example { 0% {background-color:red; ;} 25% {background-color:yellow; } 50% {background-color:blue;} 75% {background-color:green; } 100% {background-color:red; } } 

 <label>Mylabel</label> 

Answer 3

我建議在CSS中執行此操作，但是如果您想使用JS解決方案，則可以使用setInterval()定義間隔並切換指定顏色的類，或者只更改element.style.color或其他任何內容，然后使用CSS過渡來過渡顏色變化。

 var interval = setInterval(function () { label.classList.toggle('color'); },2000) 

 label { transition: 2s; color: green; } .color { color: red; } 

 <label id="label">text</label>