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

当前位置:主页 > Html5库 > html5 canvas > HTML5 canvas元素背景梦幻小星星闪烁特效
HTML5 canvas元素背景梦幻小星星闪烁特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-03
    阅读:
简要教程

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