当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<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元素来包裹要制作星星闪耀效果的文本。

```html
<div id="main">
  jQuery站库
</div>
```
##### CSS样式 
文本要足够大才会有较好的效果，另外背景色要使用较深的颜色。

```html
body {
  background-color: #1d1f20;
  margin: 0;
  padding: 20px;
}
 
#main {
  color: #666;
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过sparkle()方法来初始化该星星闪耀特效插件。

```html
$("#main").sparkle();      
```        
你也可以在同一个元素上添加多个星星闪耀效果。

```html
$("#main").sparkle({
  size: 30
}).sparkle({
  size: 30
}).sparkle({
  delay: 1000,
  size: 10,
  pause: 750
});       
```           
如果要销毁这个星星闪耀特效，可以使用下面的语句：

```html
$("#main").sparkle("destroy"); 
```                 
#####  配置参数

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果