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过渡以转换颜色变化。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何随时间动态更改html中<label>的颜色

3 个答案: