让一个html元素闪烁一种背景色，然后渐变为另一种

Having a html element flash a background color and fade to another

本文关键字：背景色 然后 另一种 一种 渐变 闪烁 一个 html 元素      更新时间：2023-09-26

我正在寻找一个轻量级的解决方案，让像div或li这样的HTML元素闪烁一种背景颜色，比如纯绿色，然后在一段时间内褪色为另一种颜色，比如在3秒内褪色为白色。

我不想包含像jquery这样的大型库，我只需要在Firefox上使用它，解决方案越轻越好！

我知道我可以用javascript很容易地做到这一点，但它不会很轻，我认为必须有一些方法可以用CSS做到这一点将是我认为的理想解决方案。

使用animation。请记住，您可能需要在所有目标浏览器上加上前缀才能使其工作。

HTML

<div id='flashMe'></div>

CSS

#flashMe {
  height:500px;
  width:500px;
  background:black;
  animation: flash 3s forwards linear normal;
}
@keyframes flash {
  0% {
    background:black;
  }
  4% {
    background:green;
  }
  100% {
    background:red;
  }
}

您可以看看CSS3动画。我对CSS3不是很好，所以我不能提供任何解决方案，但afaik CSS3可以做这样的事情。

http://www.w3schools.com/css3/css3_animations.asp

相关文章：