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

带视觉差效果可互动的背景粒子动画特效

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

带视觉差效果可互动的背景粒子动画特效

简介

##### HTML结构
这个背景粒子动画特效的HTML结构使用的是一个无序列表。每一个列表元素是一个层，在每一个层中放置一张粒子图片。data-depth属性设置了各个图层的深度。

```html
<ul id="scene">
  <li class="layer" id="specks" data-depth="0.1"></li>
  <li class="layer" id="layer-1" data-depth="0.15">
    <div class="img" id="img-1"></div>
  </li>
  <li class="layer" id="layer-2" data-depth="0.25">
    <div class="img" id="img-2"></div>
  </li>
  <li class="layer" id="layer-3" data-depth="0.45">
    <div class="img" id="img-3"></div>
  </li>
</ul>           
```     
#####  CSS样式
这个背景粒子动画特效的CSS样式非常简单。整个用于制作背景粒子动画的无序列表被设置为100vw和100vh，使它和视口宽度和高度相同。z-index设置为999，如果你要在背景上放置元素，z-index要比999高。

```html
#specks {
  position: absolute;
  z-index: 999;
  height: 100vh;
  width: 100vw;
}      
```          
.speck是用于动画的粒子，它的样式如下：

```html
.speck {
  opacity: 0;
  height: 4px;
  width: 4px;
  background: url('../img/speck_zpsu9xym9zl.png');
  background-size: cover;
  position: absolute;
  border-radius: 10px;
  z-index: 99;
}           
```     
所有的图片都被设置了非常大的宽度和高度，开始时，top和left分别为-8500px和-8000px，然后它们被执行float动画，使用transform:translate(8000px, 4000px);使图片从左上角向右下角运动。

```html
.img {
  position: absolute;
  height: 100000px;
  width: 100000px;
  top: -8500px;
  left: -8000px;
  animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  animation-name: float;
  animation-iteration-count: infinite;
}
@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
      transform:translate(8000px, 4000px);
  }
}          
```      
#####  JAVASCRIPT
背景粒子的视觉差效果使用的是parallax.js来完成。在jQuery代码中，使用twinkle()函数来随机生成一些闪烁的粒子。这些粒子生成后或执行twinkle CSS动画，它们会由透明变为75%透明度，在变为完全透明，在这个过程中会移动一段距离，形成以淡入，移动一段距离，在淡出的效果。

```html
function twinkleLoop(i) {
    var duration = Math.random() * 5 + 3;
    duration = duration - (495 - speed) / 100;
    twinkle(i, duration);
    setTimeout(function () {
        twinkleLoop(i);
    }, duration * 1000);
}
function twinkle(id, duration) {
    var top = Math.floor(Math.random() * 85) + 0 + '%';
    var left = Math.floor(Math.random() * 85) + 0 + '%';
    $('#speck' + id).remove();
    $('#specks').append('<div class="\'speck\'" id="\'speck'" +="" '\'=""></div>');
    $('#speck' + id).css({
        'top': top,
        'left': left,
        'animation-duration': duration + 's',
        'animation-timing-function': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',
        'animation-name': 'twinkle'
    });
}       
```

web299.com

带视觉差效果可互动的背景粒子动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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