Javascript 背景颜色闪烁并褪色

Question

我有一个 div 需要有一个持续闪烁的背景色。

我想要它做的就是从透明淡入到红色，然后循环返回。我见过几个这样做的示例，但它们都会影响 div 的全部内容，而不仅仅是 背景颜色。

其他示例有一个闪烁的背景，但它不是一个平滑的过渡，这正是我所需要的。

如果可能的话，我宁愿不使用 CSS 动画。

感谢您的帮助!

Answer 1

您可以使用rgba 颜色将颜色淡化为透明。

例子:

var ofs = 0;
var el = document.getElementById('imp');

window.setInterval(function(){
  el.style.background = 'rgba(255,0,0,'+Math.abs(Math.sin(ofs))+')';
  ofs += 0.01;
}, 10);

演示:http://jsfiddle.net/Guffa/BUL2z/

使用 jQuery:

var ofs = 0;

window.setInterval(function(){
  $('#imp').css('background', 'rgba(255,0,0,'+Math.abs(Math.sin(ofs))+')');
  ofs += 0.01;
}, 10);