javascript - Jquery 运动模糊

Question

我在一家公司工作，将 Flash 广告横幅转换为 html5。

我需要转换从左边滑入的闪光图像，同时它执行运动模糊效果，就像有风的效果。

我已经转换了图像中的幻灯片，但我不确定如何添加有风的效果。

这是 car image我想复制，这是我的代码 jsfiddle提前致谢。

HTML

<div id = "wrapper" >       
 <div id="mainContainer">
    <div id="text">
        <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
    </div>  
 </div>
</div>

CSS

#wrapper {
    left: 50px;
    top: 50px;
    width: 300px;
    height:250px;
    position: absolute;
}
#mainContainer {
    background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
    width:300px;
    height:250px;
    overflow: hidden;
    position: absolute;
}
#Image_Car {
    position:absolute;
    overflow: hidden;
    margin:60px 8px;
    left: -120px;
}

jQuery

 $(document).ready(function () {
     bannerAnimation();
 });

 function bannerAnimation() {
     //Jquery Animation
     $("#Image_Car").animate({
         left: "30"
     }, 500, function () {
         $("#Image_Car").animate({
             left: "10"
         }, 200);
     });
 }

Answer 1

Jquery 不会帮助您创建运动模糊，除非您使用几乎没有人用于创建广告的 Canvas ，

或，

您可以创建多个图像实例并将其放置在同一个地方，然后以微小的时间间隔和不透明度为每个图像设置动画。