HTML5 SVG线条背景动画插件

当前位置:主页 > Html5库 > SVG > HTML5 SVG线条背景动画插件
HTML5 SVG线条背景动画插件
分享:

    插件介绍

    ckLine.js是一款HTML5 SVG线条背景动画插件。通过ckLine.js插件,你可以为页面添加漂亮的线条动画效果。通过配置参数,你可以设置线条的数量和动画效果,非常方便。

    浏览器兼容性

    浏览器兼容性
    时间:2017-12-13
    阅读:
简要教程

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();
                

配置参数

参数 类型 默认值 描述
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>] 时间范围数组

ckLine.js SVG线条背景动画插件的github地址为:https://github.com/captainKeller/ckLine