昨天 09:12 上传

点击文件名下载附件

　　简要教程

　　这是一款使用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 5295 .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。