视觉粒子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代码前参考下载文件。
视觉粒子html,带视觉差效果可互动的背景粒子动画特效相关推荐
- html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画 动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
- html照片墙效果,超酷CSS3相册照片墙动画特效
这是一款使用CSS3 transform属性制作的炫酷相册照片墙动画特效.该照片墙特效将一组图片旋转打乱排放在屏幕中,鼠标滑过照片时,照片会动画旋转并现在在所有照片的最上方. 使用方法 HTML结构 ...
- html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊 烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
- html5 雨滴效果,html5 canvas下雨滴掉落动画特效
特效描述:html5 canvas 雨滴掉落动画 动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...
- html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
- css3蒲公英飘动效果_纯CSS3逼真的气球漂浮动画特效
这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效.这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果. 制作方法 HTML结构 ...
- html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
最新文章
- java微信公众号开发token验证失败的问题及解决办法
- java string类api_JAVA中String类的常用方法API
- 一种zernike多项式的解释(暂时没有弄完)
- linux rsync 远程同步
- batch size自适应log(1)
- 二叉排序树BST代码(JAVA)
- 连接Oracle时ORA-12541 TNS 无监听程序
- Chapter 1 Securing Your Server and Network(1):选择SQL Server业务经理
- 网络配置_Linux CentOS怎么配置网络
- ceph集群安装报错解决方法
- matlab演奏《起风了》代码
- linux 在指定区域分配内存 c语言,C语言动态内存分配:(一)malloc/free的实现及malloc实际分配/释放的内存...
- CPU、GPU、TPU、NPU等到底是什么
- 软件设计师——信息安全知识
- C++库和C库的区别
- node.js Stream(流) 和 EJS 模板引擎——0822
- ## 项目第十五天 ##
- linux命令rm rf什么意思,关于对linux命令rm -rf 的理解
- 正向代理和反向代理概念及区别
- ai修复图片 python_Python + AI 图片识别案例
热门文章
- 微信小程序我来运动健身系统
- 游戏检测到计算机性能过低配色,win7提示是否要更改配色方案来提高性能的解决方法...
- 计算机演示文稿的使用步骤,计算机二级MSOFFICE演示文稿操作步骤.docx
- python金融工程的工具包_《华尔街学堂:三大金融技能工具——Wind. Excel 与 Python》...
- Springboot+thymeleaf+IDEA——解决th标签的报错问题,爆红,找不到标签
- 照片不超过100kb怎么弄?图片怎么压缩到100kb以内?
- 虹软人脸识别3.0 - 图像数据结构介绍(Android)
- 2020-03-22
- 如果你是安全工程师、逆向工程师,那么你可能需要一本《二进制分析实战》
- [转] JS 排序(包括按中文拼音排序) Google到的好东西,收藏!