web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
动画效果
HTML5轻量级绘制SVG轮廓线路径动画插件
分类：
动画效果
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。 ```html <script src="js/jquery.min.js"></script> <script src="js/jquery.drawsvg.js"></script> ``` ##### 初始化插件 在页面DOM元素加载完毕之后，可以通过下面的方法来使SVG图形生成轮廓线动画效果。 首先将初始化的对象实例保存为一个变量： ```html var mySVG = $('#my_svg_element').drawsvg(); ``` 然后就可以执行动画效果了： ```html mySVG.drawsvg('animate'); ``` ##### 配置参数 下面是该SVG路径动画创建的可用配置参数： | 参数 | 类型 |默认值 | 描述 | | ------------ | ------------ | ------------ | ------------ | |duration|Integer|1000|完成每一个路径动画的持续时间| |stagger|Integer|200|每一个路径动画开始前的延迟时间| |easing|String|swing|使用jQuery Easing插件的过渡动画效果| |reverse|Boolean|false|是否反向绘制| |callback|Function|function() {}|路径动画完成之后的回调函数|
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
