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

这是一款效果非常炫酷的jQuery和CSS3网页背景粒子动画特效。该背景特效中粒子可以使用鼠标来进行互动，并且在粒子运动的过程中带有一些视觉差特效。

制作方法

HTML结构

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

CSS样式

这个背景粒子动画特效的CSS样式非常简单。整个用于制作背景粒子动画的无序列表被设置为100vw和100vh，使它和视口宽度和高度相同。z-index设置为999，如果你要在背景上放置元素，z-index要比999高。

#specks {

position: absolute;

z-index: 999;

height: 100vh;

width: 100vw;

}

.speck是用于动画的粒子，它的样式如下：

.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);使图片从左上角向右下角运动。

.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%透明度，在变为完全透明，在这个过程中会移动一段距离，形成以淡入，移动一段距离，在淡出的效果。

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('

');

$('#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'

});

}

具体js代码前参考下载文件。