CSS样式

该DOM元素背景特效对CSS样式没有要求，你可以任意添加需要的CSS样式。如DEMO中为背景添加了渐变，按钮添加了一些阴影效果。

.sparkley {

background: #3e5771;

color: white;

border: none;

padding: 16px 36px;

font-weight: normal;

border-radius: 3px;

transition: all 0.25s ease;

box-shadow: 0 38px 32px -23px black;

margin: 0 1em 1em;

}

.sparkley:hover {

background: #2c3e50;

color: rgba(255, 255, 255, 0.2);

}

html {

font-family: Lato;

font-weight: 200;

font-size: 1em;

text-align: center;

color: #ddd;

min-height: 100%;

background: #092756;

background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);

background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);

background: -o-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);

background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);

background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);

}

JAVASCRIPT

该星星特效的默认调用方式如下：

$(".ele").sparkleh();

你可以在调用时传入一些参数，可用的参数有：

color：小星星的颜色。特效中内置了一个彩虹色：rainbow，你也可以设置为颜色数组：["#ff0080","#ff0080","#0000FF"]或单独的颜色：

$(".ele1").sparkleh({

color: "rainbow"

});

$(".ele1").sparkleh({

color: ["#ff0080","#ff0080","#0000FF"]

});

$(".ele1").sparkleh({

color: "#00ff00"

});

count：小星星的数量。

speed：小星星闪烁的速度。

overlap：小星星可以移出元素的范围。

该小星星背景特效使用非常简单，具体查看各个DEMO。