其他代码

MotionBlurJS 模糊移动动画特效插件

面包多

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

(0)

本文由来源 jQuery之家,由 PetitQ 整理编辑!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!