Question

我只有iPad的HTML5漫画书，我正在制作互动版。在漫画书的第8页（见下面的链接），我所指的场景位于右下角，应该看起来很暗，因为目前有一个黑暗版本的东西，使它看起来像光尚未开启。

这就是我想要发生的事情：

点击后，播放声音（完美）
点击后，暗背景层的不透明度与播放声音开始时听到的短电声效果同步闪烁。不透明度应该以0结束，以显示灯光现在已开启。

以下是目前的情况：

点击后，播放声音（完美）
点击后，深色背景图层的不透明度设置为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监听click事件来执行动画并在时间结束后停止它。

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

注意我只使用了webkit，因此您需要对其进行更改以使其在所有浏览器中都能正常运行。

CSS3中闪烁的光（点击动画）动画

1 个答案: