网页上这种效果如何达到的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容 #Wrapper { background-color: #e2e2e2; background-image: url("/static/img/shadow_light.png"), url("//cdn.v2ex.com/assets/bgs/circuit.png"); background-repeat: repeat-x, repeat-x; } #Wrapper.Night { background-color: #1f2e3d; background-image: url("/static/img/shadow.png"), url("//cdn.v2ex.com/assets/bgs/circuit_night.png"); background-repeat: repeat-x, repeat-x; background-size: 20px 20px, 162.5px 162.5px; }

这是一个创建于 3226 天前的主题，其中的信息可能已经有所发展或是发生改变。

偶然看到个网站的背景用的这种效果：
鼠标滑动会创造多边形，太有趣了！
https://www.famio.cn/wp-content/uploads/2016/12/GIF.gif

想问下有没有类似的 demo ，我也想弄一个！

Demo

效果

偶然

网页

26 条回复 2016-12-18 09:33:27 +08:00

wyntergreg

2016-12-16 12:24:40 +08:00

在某博客上见过这个效果，地址忘了...

designer

2016-12-16 12:29:15 +08:00

太多啦，烂大街的科技感特效。

forblackking

2016-12-16 12:29:22 +08:00 via Android

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

lufficc

2016-12-16 12:35:25 +08:00 via Android

https://lufficc.com

Famio

2016-12-16 12:38:06 +08:00

@forblackking @luffylcc 感谢两位提供干货。
但是觉得和我要的不是一个东西，虽然都是 particles ……

forblackking

2016-12-16 12:42:00 +08:00 via Android

@Famio 可以看一下配置文件，我记得以前实现过一楼效果

Famio

2016-12-16 12:43:31 +08:00

@forblackking 感谢朋友。
已经在源网站里 F12 到了 js ，根据 js 搜索到了……嗯，居然这东西也是出自 V 站。
t/241698

forblackking

2016-12-16 12:45:55 +08:00 via Android

@Famio 我也试试

it1989

2016-12-16 12:47:50 +08:00

就是我博客的背景啊，不过不贴网址了， V2er 太凶残，一大波过来，服务器撑不住。。。

MaiCong

2016-12-16 12:50:36 +08:00 via iPhone

github 搜索粒子效果

Famio

2016-12-16 13:00:28 +08:00

@it1989 大兄弟早点说啊~不过我也已经实装了，蛮好玩的，哈

loadinger

2016-12-16 13:36:47 +08:00

就我一个人觉得 low 成马了?

Famio

2016-12-16 14:01:44 +08:00

@loadinger 各有所好， I dont care.

TomIsion

2016-12-16 14:18:42 +08:00

https://github.com/hustcc/canvas-nest.js

国人写的

beiping96

2016-12-16 14:34:59 +08:00

已成功 hexo+next

fool

2016-12-16 14:36:42 +08:00 via Android

@luffylcc 你好，请问你们这种首页只有中间一块的是什么搭的，用 wordpress 可以吗

pheyer

2016-12-16 15:20:14 +08:00

gif 是 404 ？

Famio

2016-12-16 15:30:53 +08:00

@pheyer 图床借了自己博客，问题解决了，故已删。

sh1t0nu

2016-12-16 16:18:22 +08:00 via Android

@beiping96 请问是加到哪里呢 foot 么

beiping96

2016-12-16 16:34:06 +08:00

@sh1t0nu 把`<script type="text/Javascript" color="0,0,0" opacity='0.33' zIndex="-1" count="99" src="{{ url_for(theme.js) }}/src/canvas-nest.min.js"></script>`放到 themes/next/layout/_layout.swig

然后把 canvas-nest.min.js 放到 themes/next/source/js/src

blog.beiping96.com 并不好看，鼠标放着不动会不停抖， github 已 issue