HTML5 canvas元素背景梦幻小星星闪烁特效

这是一款使用HTML5 canvas制作的DOM元素背景梦幻小星星闪烁动画特效。该特效可以在任何HTML DOM元素上通过canvas来在鼠标滑过时制作星星闪烁的效果，可以为元素添加一些梦幻色彩。

制作方法

HTML结构

可以是然后HTML DOM元素，但是如果是<img>元素，必须使用一个<div>对其进行包裹，否则没有效果。

<div class="img">
  <img id="image" src="img/Rain-l.jpg" alt>
</div>         
              

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。