其他代码
MotionBlurJS 模糊移动动画特效插件
PetitQ
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>
Github 网址：https://github.com/Adir-SL/MotionBlurJS
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
