html - CSS3 中闪烁的灯光(点击)动画

Question

我有一本仅供 iPad 使用的 HTML5 漫画书，我正在制作交互式漫画书。在漫画书的第 8 页(见下面的链接)，我所指的场景在右下角，应该看起来是黑暗的，因为目前有一个在它下面有一个黑暗版本，让它看起来像光还没有打开。

Link to the comic

这是我想要发生的事情:

1. 点击时，播放声音(完美)
2. 单击时，深色背景层的不透明度会随着播放声音开始时听到的短促电声效果同步闪烁。不透明度应以 0 结尾，以表明灯现在亮着。

这是目前发生的事情:

1. 点击时，播放声音(完美)
2. 点击时，深色背景层的不透明度设置为 0，但一旦用户释放点击，它就会恢复为 1。

基本上，我要引入不透明度延迟和不透明度参数之间的“闪烁”以模仿闪烁的光。

HTML

<a href="#" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">

    <div class="ibox" id="p8s5">

        <div id="flicker"></div>    

        <button id="playButt" class="animated flash" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">                
        </button>

    </div> 

</a>

CSS

div#flicker {
opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: 0s;
-webkit-transition-delay: 0s;
position: absolute;
bottom: 1px; right: 1px;
width: 245px; height: 341px;
background: url('img/p8s5.jpg') no-repeat;
}

div#flicker:active, div#flicker:focus {
  opacity:0;
}

希望你能帮到你。

非常感谢，马特

Answer 1

这jsfiddle可能会解决您的问题。

首先，它使用 css3 创建一个动画:

.animateFlicker {
    -webkit-animation: flicker 17s;    
}

@-webkit-keyframes flicker{
    0% {opacity:1}
    3% {opacity:0}
    6% {opacity:0}
    7% {opacity:1}
    8% {opacity:0}
    9% {opacity:1}
    10% {opacity:0}
    99% {opacity:0}
    100% {opacity:1}
}

然后用jQuery监听点击事件执行动画，时间结束后停止。

$('#flicker').click(function(){
    var $this = $(this);
    $this.addClass('animateFlicker');
    setTimeout(function() 
    {
        $this.removeClass('animateFlicker');
    }, 17000);    
});​

请注意，我只使用过 webkit，因此您需要更改它以使其在所有浏览器中都能正常工作。