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

<!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. 2019.11.29 SAP SMTP郵件服務器配置 發送端 QQ郵箱

    今天群裏的小夥伴問了如何配置郵件的問題,隨自己在sap裏面配置了一個 1.    RZ10配置參數 a)       参数配置前,先导入激活版本 执行完毕后返回 b)      输入参数文件DEFAU ...

  2. 读取web工程中.properties资源文件的模板代码

    读取web工程中.properties资源文件的模板代码 // 读取web工程中.properties资源文件的模板代码 private void test2() throws IOException ...

  3. 【HANA系列】SAP HANA SQL查找字符串位置

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL查找字符 ...

  4. 【AMAD】stackprint -- 为Python加入利于调试的traceback信息

    简介 动机 作用 用法 热度分析 源码分析 个人评分 简介 为Python加入利于调试的traceback信息.  动机 Python抛出异常时,会显示一些traceback信息.但是,一些时候这些 ...

  5. 云计算共享组件--Memcache缓存系统（4）

    一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告 ...

  6. 【C/C++】BOOST 线程完全攻略 - 基础篇

    C++多线程开发是一个复杂的事情,mfc下提供了CWinThread类,和AfxBeginThread等等函数,但是在使用中会遇到很多麻烦事情,例如线程之间参数传递的问题,我们一般都是把参数new一个 ...

  7. 【VS开发】OutputWnd自动滚动

    最近在尝试VS2010中的各种新鲜插件,首先从最简单的输出窗口入手. VS2010向导中产生的输出窗口是通过CMainFrame中的COutputWnd类的对象m_wndOutput生成的.为了向输出 ...

  8. 【Linux开发】linux设备驱动归纳总结（三）：7.异步通知fasync

    linux设备驱动归纳总结(三):7.异步通知fasync xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  9. jump用户管理命令

    ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa手动拷贝id_rsa.pub的内容到其他机器 或者用 ssh-copy,但你得知道对方root密码 ssh-copy-i ...

  10. luoguP2015（简单树形DP）

    题目链接:https://www.luogu.org/problemnew/show/P2015 题意:给定一颗结点个数为n的树,有n-1条边,每条边有个权值,树根为1.现在给出q <=n,问剪 ...