知乎首页粒子效果动态背景

效果展示：

知乎网址：https://www.zhihu.com/

https://github.com/VincentGarreau/particles.js/

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <style>
  7         body {  8             background: #f7fafc none repeat scroll 0 0;
  9             color: #555;
 10             font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
 11             font-size: 15px;
 12             line-height: 1.7;
 13         }
 14
 15
 16         #particles { 17             position: absolute;
 18             top: 0;
 19             width: 100%;
 20             z-index: -1;
 21         }
 22     </style>
 23
 24
 25 </head>
 26 <body>
 27
 28     <div id="particles"></div>
 29
 30     <script src="Content/js/indexS/particles.js"></script>
 31
 32     <script type="text/javascript">
 33         particlesJS("particles", {
 34             "particles": {
 35                 "number": {
 36                     "value": 20,
 37                     "density": {
 38                         "enable": true,
 39                         "value_area": 1E3
 40                     }
 41                 },
 42                 "color": {
 43                     "value": "#e1e1e1"
 44                 },
 45                 "shape": {
 46                     "type": "circle",
 47                     "stroke": {
 48                         "width": 0,
 49                         "color": "#000000"
 50                     },
 51                     "polygon": {
 52                         "nb_sides": 5
 53                     },
 54                     "image": {
 55                         "src": "img/github.svg",
 56                         "width": 100,
 57                         "height": 100
 58                     }
 59                 },
 60                 "opacity": {
 61                     "value": 0.5,
 62                     "random": false,
 63                     "anim": {
 64                         "enable": false,
 65                         "speed": 1,
 66                         "opacity_min": 0.1,
 67                         "sync": false
 68                     }
 69                 },
 70                 "size": {
 71                     "value": 15,
 72                     "random": true,
 73                     "anim": {
 74                         "enable": false,
 75                         "speed": 180,
 76                         "size_min": 0.1,
 77                         "sync": false
 78                     }
 79                 },
 80                 "line_linked": {
 81                     "enable": true,
 82                     "distance": 650,
 83                     "color": "#cfcfcf",
 84                     "opacity": 0.26,
 85                     "width": 1
 86                 },
 87                 "move": {
 88                     "enable": true,
 89                     "speed": 2,
 90                     "direction": "none",
 91                     "random": false,
 92                     "straight": false,
 93                     "out_mode": "out",
 94                     "bounce": false,
 95                     "attract": {
 96                         "enable": false,
 97                         "rotateX": 600,
 98                         "rotateY": 1200
 99                     }
100                 }
101             },
102             "interactivity": {
103                 "detect_on": "canvas",
104                 "events": {
105                     "onhover": {
106                         "enable": false,
107                         "mode": "repulse"
108                     },
109                     "onclick": {
110                         "enable": true,
111                         "mode": "push"
112                     },
113                     "resize": true
114                 },
115                 "modes": {
116                     "grab": {
117                         "distance": 400,
118                         "line_linked": {
119                             "opacity": 1
120                         }
121                     },
122                     "bubble": {
123                         "distance": 400,
124                         "size": 40,
125                         "duration": 2,
126                         "opacity": 8,
127                         "speed": 3
128                     },
129                     "repulse": {
130                         "distance": 200,
131                         "duration": 0.4
132                     },
133                     "push": {
134                         "particles_nb": 4
135                     },
136                     "remove": {
137                         "particles_nb": 2
138                     }
139                 }
140             },
141             "retina_detect": true
142         }
143 );
144     </script>
145 </body>
146 </html>

View Code

代码如上：

如果有需要可以把粒子的js配置代码放到单独文件种去

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {console.log('callback - particles.js config loaded');
});

转载于:https://www.cnblogs.com/DemoLee/p/6290136.html

知乎首页粒子效果动态背景相关推荐

网站首页炫酷动态背景实现
网站首页炫酷动态背景实现先贴出我苦找良久的网站动态背景图实现过程先来一个html简单的显示界面 <!doctype html> <html><head>< ...
Canvas实现HTML动态粒子效果背景
之前参考诸多博客,发现许多博主自定义的博客主页都会有很多动态的小粒子在页面漂浮,鼠标经过还会有响应事件,在这里,将代码记录一下. 首先,在html页面要先定义一个canvas元素: <canva ...
【CSON原创】HTML5字体动态粒子效果发布
功能说明: 输入字体,按确定后,右侧画布出现字体的动态粒子效果. 效果预览: 输入显示内容: 实现分析: 之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果,和当耐特砖家的HTML ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
知乎首页实战之背景与大体布局
模仿知乎首页编写之背景与布局刷完w3c的基础教程没有实际的操作,所以在一次偶然的想法驱动下开始模仿写出一个静态知乎登录网页. 背景设置打开知乎首页查看,之前的文章已经提到了查看网页源码,可以在其中 ...
html粒子效果原理,HTML5字体动态粒子效果
功能说明: 输入字体,按确定后,右侧画布出现字体的动态粒子效果. 效果预览: 详见:http://www.cnblogs.com/Cson/archive/2012/04/02/2429734.htm ...
前端例程20220913：粒子飘落效果动画背景
演示原理使用JS动态创建块元素作为粒子,动态设置其位置.大小.颜色等属性,动态设置每个粒子的动画. 代码 <!DOCTYPE html> <html lang="en& ...
Vue:项目使用vue-particles实现动态粒子效果作为背景显示
实现过程 1. 安装vue-particles npm install vue-particles --save-dev 2. 全局配置vue-particles // 引入动态背景vue-parti ...
html5粒子形成图案,html5 canvas粒子形成下雪背景的效果
本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. canvas粒子形成下雪背景 body{ margin: ...

知乎首页粒子效果动态背景

知乎首页粒子效果动态背景相关推荐

最新文章

热门文章

知乎首页 粒子效果 动态背景

知乎首页 粒子效果 动态背景相关推荐

最新文章

热门文章

知乎首页粒子效果动态背景

知乎首页粒子效果动态背景相关推荐