sparkle.jquery.js-基于SVG的jQuery星星闪耀特效插件

jopen 8年前

sparkle.jquery.js是一款可以制作炫酷的星星闪耀效果的 jQuery插件 。该插件基于 SVG 来制作星星闪耀效果,你可以控制星星的颜色,边框色,大小,延迟时间等属性。

sparkle.jquery.js-基于SVG的jQuery星星闪耀特效插件

查看演示 下载插件

使用方法

使用该星星闪耀插件需要在页面中引入sparkle.css,jQuery和sparkle.jquery.js文件。

HTML结构

可以直接使用一个

元素来包裹要制作星星闪耀效果的文本。
jQuery之家

CSS样式

文本要足够大才会有较好的效果,另外背景色要使用较深的颜色。

body {    background-color: #1d1f20;    margin: 0;    padding: 20px;  }     #main {    color: #666;    display: inline-block;    font-size: 200%;    font-weight: bold;  }

初始化插件

在页面DOM元素加载完毕之后,可以通过sparkle()方法来初始化该星星闪耀特效插件。

$("#main").sparkle();

你也可以在同一个元素上添加多个星星闪耀效果。

$("#main").sparkle({    size: 30  }).sparkle({    size: 30  }).sparkle({    delay: 1000,    size: 10,    pause: 750  });

如果要销毁这个星星闪耀特效,可以使用下面的语句:

$("#main").sparkle("destroy");

配置参数

sparkle.jquery.js-基于SVG的jQuery星星闪耀特效插件

来源:http://www.htmleaf.com/html5/SVG/201602283157.html

</div> </div>

来自: http://www.html5cn.org/article-9370-1.html