css - 如何使用 css 使 img 闪烁(应该适用于所有浏览器)

Question

.name{
  width: 10px;
  height: 10px;
  -webkit-transition:opacity 2s; /* For Safari 3.1 to 6.0 */
  transition:opacity 2s;

}

.students img:hover{
  width: 10px;
  height: 10px;
  opacity: 0.5;
}

现在我可以在悬停时更改不透明度，但我希望图像闪烁，即不透明度应该变为 0，然后回到 1，然后再次变为 0，然后像闪烁一样回到 1。希望我能解释我的问题

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

我建议为此目的使用 jQuery 或简单的 javascript。例如:

$(function () 
{
    flicker();
    function flicker () 
    {           
        $('#test').fadeIn(100, function ()
        {
            $('#test').fadeOut(150, function () 
            {                    
               setTimeout(flicker, 50);               
            });
        });
    }

});

live demo

可以通过修改fadeIn、fadeOut函数的第一个参数和setTimeout的第二个参数来设置闪烁的速度。请注意它们以毫秒为单位。

编辑

我已经找到了如何仅使用 CSS3 执行此操作。这是 live demo