当前位置：首页 > 网页特效 > 背景

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

分类：背景日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div class="img">
  <img id="image" src="img/Rain-l.jpg" alt>
</div>    
```     
#####  CSS样式
该DOM元素背景特效对CSS样式没有要求，你可以任意添加需要的CSS样式。如DEMO中为背景添加了渐变，按钮添加了一些阴影效果。

```html
.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
该星星特效的默认调用方式如下：

```html
$(".ele").sparkleh();
```
你可以在调用时传入一些参数，可用的参数有：

- color：小星星的颜色。特效中内置了一个彩虹色：rainbow，你也可以设置为颜色数组：["#ff0080","#ff0080","#0000FF"]或单独的颜色：
```html
$(".ele1").sparkleh({
    color: "rainbow"
});
$(".ele1").sparkleh({
    color: ["#ff0080","#ff0080","#0000FF"]
});
$(".ele1").sparkleh({
    color: "#00ff00"
});
```
- count：小星星的数量。
- speed：小星星闪烁的速度。
- overlap：小星星可以移出元素的范围。
该小星星背景特效使用非常简单，具体查看各个DEMO。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果