js模糊幻影动画特效插件

js模糊幻影动画特效插件

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

使用方法
在页面中引入blur.js文件。

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论