js模糊幻影动画特效插件

MotionBlurJS是一款小巧的js模糊幻影动画特效插件。该插件可以为正在执行CSS3动画的元素添加炫酷的模糊幻影效果。支持HTML元素和SVG元素动画。

使用方法

在页面中引入blur.js文件。

<script src="js/blur.js"></script>               
                

HTML结构

为你需要执行幻影模糊动画效果的元素添加blurjs或fadejs class类。

<div id="yourId" class="someClass blurjs"></div>
<div id="yourId" class="fadejs someClass"></div>
                

SVG元素动画

要为SVG元素添加模糊幻影动画，SVG的结构类似下面的样子。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 414 150.8" style="enable-background:new 0 0 414 150.8;" xml:space="preserve">
    <script xlink:href="js/blurSVG.js" />
    <style type="text/css">
        .st0{
            animation-name: circleAnim;
            animation-play-state: running;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    @keyframes circleAnim{
        0%{transform: translate(0,0);}
        20%{transform: translate(0,56%);}
        50%{transform: translate(30%,56%);}
        100%{transform: translate(0,0);}
    }
    </style>
    <circle id="circleA" class="st0 blurjs" cx="40" cy="40" r="20" fill="#85B528" />
    <circle id="circleB" class="st0 fadejs" cx="200" cy="40" r="20" fill="#1a307b" />
</svg>
                

MotionBlurJS插件的github网址为：https://github.com/Adir-SL/MotionBlurJS