这是一款使用HTML5 canvas制作的DOM元素背景梦幻小星星闪烁动画特效。该特效可以在任何HTML DOM元素上通过canvas来在鼠标滑过时制作星星闪烁的效果，可以为元素添加一些梦幻色彩。
制作方法
HTML结构
可以是然后HTML DOM元素，但是如果是元素，必须使用一个
对其进行包裹，否则没有效果。
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。
如果觉得《html5闪光效果 HTML5 canvas元素背景梦幻小星星闪烁特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
