MotionBlurJS 模糊移动动画特效插件

创客云


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

使用方法

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

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

HTML结构

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

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

SVG元素动画

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

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

Github网址:https://github.com/Adir-SL/MotionBlurJS

演示地址 免费下载
本文来源jQuery之家,经授权后由CityMall发布,观点不代表创客云的立场,转载请联系原作者。
云模板

发表评论