web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
背景
HTML5 SVG线条背景动画插件
分类：
背景
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入jquery和jquery.ckLine.min.js文件。 ```html <script src="js/jquery.min.js"></script> <script src="js/jquery.ckLine.min.js"></script> ``` ##### HTML结构 你需要在页面中放入一个svg元素。 ```html <svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg> ``` ##### 初始化插件 在页面DOM元素加载完毕之后，同通过下面的方法来初始化该SVG线条背景插件。 ```html $('#ckLine').ckLine(); ``` ##### 配置参数 | 参数 | 类型 | 默认值 | 描述 | | ------------ | ------------ | ------------ | ------------ | | svgId| string| null| SVG元素的ID| | width| number| SvgWidth| SVG元素的宽度| | height| number| SvgHeight| SVG元素的高度| | strokeColor| string| #000| SVG 线条的描边颜色| | strokeWidth| number| 2| SVG 线条的描边宽度| | animateTime| number| 1000| 动画的速度| | interval| number| 600| 线条产生的时间间隔| | fadeOut| number| 800| 线条淡出之前的时间| | lifeTime| number| 2000| 线条动画的持续时间| | easing| string| swing| easing动画效果| | leftRight| boolean| true| 是否只允许水平线条| | animationTimeRange| array| [number, number]| 时间范围数组|
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
