HTML5-基于SVG的jQuery星星闪耀特效插件

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

使用方法

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

<link rel="stylesheet" type="text/css" href="css/sparkle.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sparkle.jquery.js"></script>                
HTML结构

可以直接使用一个<div>元素来包裹要制作星星闪耀效果的文本。

<div id="main">
  jQuery之家
</div>
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");                 

配置参数

参数 默认值 描述
fill “#fff” 星星的填充颜色。
stroke “#000” 星星的描边颜色。
size 20 星星的尺寸,单位像素。
delay 0 第一个星星出现前的延迟时间,单位毫秒。
duration 1500 星星闪耀的持续时间,单位毫秒。
pause 1000 两个星星之间的延迟时间,单位毫秒。

jquery-sparkle星星闪耀特效插件的github地址为:https://github.com/maxspeicher/jquery-sparkle

在线预览 网盘下载

网盘下载密码:7smg

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论