jQuery 运动模糊

Question

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

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

我已经转换了图片中的幻灯片，但我不知道如何添加风效果。

这是我要复制的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 不会帮助您创建运动模糊，除非您使用画布，几乎没有人使用它来制作广告，

或，

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

Answer 2

这是一个非常适合你的插件： DEMO

plugin