今天发现一个粒子动画的插件下个笔记做个备用:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
#page1 {
background: url(images/mask.png) left center no-repeat;
height: 750px;
padding-top: 87px;
background-size: cover;
/* Retina display */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
background-image: url(images/mask@2x.png);
background-size: 1440px 750px;
}
}
.topside {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.graphics {
position: relative;
top: 0;
// background: url(images/graphics.png) 22px center no-repeat;
// background-size: cover;
height: 400px;
/* Retina display */
// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
// background-image: url(images/graphics@2x.png);
// background-size: 1189px 427px;
// }
}
</style>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/swiper.min.js"></script>
</head>
<body> <div class="page" id="page1">
<div class="topside"> <div class="graphics" id="particles-js"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){ //粒子动画
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle', // "circle", "edge" or "triangle"
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1
}
},
interactivity: {
enable: true,
mouse: {
distance: 300
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab',
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
}
}
},
/* Retina Display Support */
retina_detect: true
});
});
</script>

particlesjs的更多相关文章

  1. 在网页中使用particlesjs实现背景的动态粒子特效

    先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...

  2. 引入插件的时候 提示particlesJS is not defined

    particlesJS is not defined   插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入 ...

  3. particlesJS is not defined

    插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入min类的文件在引入配置文件 比如particles插件, ...

  4. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  5. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  6. 【Java EE】从零开始写项目【总结】

    从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...

  7. particles.js在vue上的运用

    转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...

  8. particles.js中文开发手册

    2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...

  9. js实现粒子特效,particles.js的使用

    今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...

随机推荐

  1. [笔记] Ubuntu机器添加新硬盘安装流程

    SSD虽然快,但是容量不够用,买了块希捷4TB的机械硬盘,准备给台机扩容. 安装环境 OS: Ubuntu 18.04 安装新硬盘 问了客服,原来这款机箱已经带了硬盘滑槽,不需要固定螺钉了. 买了SA ...

  2. boost::multi_index 提供一种千人在线即时排行榜的设计思路

    原文地址: http://www.limerence2017.com/2019/06/23/cpp01/ 做游戏或金融后台开发,经常会遇到设计开发排行榜的需求.比如玩家的充值排行,战力排行等等.而这种 ...

  3. django在style的样式image url添加静态图片路径和django如何动态传入图片链接?

    #django在style的样式image url添加静态图片路径 style=" background:url({% static "agribusiness/images/lo ...

  4. Golang 单例模式 singleton pattern

    在Java中,单例模式的实现主要依靠类中的静态字段.在Go语言中,没有静态类成员,所以我们使用的包访问机制和函数来提供类似的功能.来看下下面的例子: package singleton         ...

  5. Day02:基本IO操作

    IO流 基本IO与OS 按照流的方向主要分为输入流和输出流. 数据流按照数据单位的不同分为字节流和字符流. 按照功能可以划分节点流和处理流. 节点流与处理流 按照流是否直接与特定的地方(如磁盘.内存. ...

  6. SQL- 将一张表的数据插入到另一张表,表结构不一致(加条件)

    公司业务需要,在对表进行操作的时候将操作人和操作记录记录到日志表里.记录下来以供参考和学习. 首先准备两张测试表:Info以及InfoLog 1.表结构相同的情况下: insert into Info ...

  7. POJ3734 Block母函数入门

    一段长度为n的序列,你有红黄蓝绿四种颜色的砖块,一块砖长度为1,问你铺砖的方案数,其中红黄颜色之和必须为偶数. #include <queue> #include <stack> ...

  8. ipcs查看消息队列命令

    修改消息队列大小: root:用户: /etc/sysctl.conf kernel.msgmnb =4203520 #kernel.msgmnb =3520 kernel.msgmni = 2878 ...

  9. ssh远程连接的故障排查详解

    排查故障: 1.两个机器之间是否通畅,看物理网络(网线网卡,IP是不是正确) ping ip -t 来检测物理网络是否通畅 通 不通 不通: 1.客户端到服务器端物理链路有问题 网卡 ,IP ,  网 ...

  10. 3. Linux的shell编程

    Shell 是一个用 C 语言编写的程序, 通过 Shell 用户可以访问操作系统内核服务.它类似于 DOS 下的 command 和后来的 cmd.exe.Shell 既是一种命令语言,又是一种程序 ...