查看: 1879|回复: 0

[HTML代码] HTML5 SVG线条背景动画插件

发表于 2018-3-28 13:17:47
简要教程[size=1.15em]
ckLine.js是一款HTML5 SVG线条背景动画插件。通过ckLine.js插件,你可以为页面添加漂亮的线条动画效果。通过配置参数,你可以设置线条的数量和动画效果,非常方便。
使用方法
在页面中引入jquery和jquery.ckLine.min.js文件。
<script src="js/jquery.min.js"></script><script src="js/jquery.ckLine.min.js"></script>                HTML结构
你需要在页面中放入一个<svg>元素。
<svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg>                初始化插件
在页面DOM元素加载完毕之后,同通过下面的方法来初始化该SVG线条背景插件。
$('#ckLine').ckLine();                配置参数
参数
类型
默认值
描述

svgIdstringnullSVG元素的ID
widthnumberSvgWidthSVG元素的宽度
heightnumberSvgHeightSVG元素的高度
strokeColorstring#000SVG 线条的描边颜色
strokeWidthnumber2SVG 线条的描边宽度
animateTimenumber1000动画的速度
intervalnumber600线条产生的时间间隔
fadeOutnumber800线条淡出之前的时间
lifeTimenumber2000线条动画的持续时间
easingstringswingeasing动画效果
leftRightbooleantrue是否只允许水平线条
animationTimeRangearray[<number>, <number>]时间范围数组
ckLine.js SVG线条背景动画插件的github地址为:https://github.com/captainKeller/ckLine




回复

使用道具 举报