抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

额.下面的文章写的超详细,真的不想再复制一遍了.这里就把菜单说明一下吧,因为这个总是糊涂. 保存前保存后 Save: 将当前编辑的内容保存到服务器上，方便下次调用和分享。如果你只是想测试用的话是不需要保存的。 Update： 将当前的状态保存为一个版本。类似于版本控制，会在URL后面加上一个数字。之前的版本还会存在，方便后期调试。 Fork: 把现在的项目复制到一个新的文件当中。 Base:...

一个例子 自己弄的小方块 粒子波动 参考文档three.js中文文档WebGL入门教程1 - 3D绘图基础知识 学习文章three.js实现的波浪效果WebGL学习笔记-使用3D引擎threeJS实现星空粒子移动 第一篇就画一个球体吧Three.js基础探寻四——立方体、平面与球体

魔幻线条curvejs 这个感觉实用性不强

粒子特效插件particles-自己的文章
JParticles是多个特效的一个整合

shape-shifter 用粒子组成文字
shape-shifter Demo

anime.js 动画库 其实跟上面的不同 但可以用这个做许多特效 而且例子不错

GreenSock-JS 动画库 这个动画的例子真的很棒
GreenSock-JS DEMO
TweenMax的实例
TweenMax的实例2

看来TweenMax用来做菱形这个背景应该是很拿手的 有空可以看一下

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 动画容器 -->
<div id="particles-js"></div>
<!-- 库引入 -->
<script src="particles.js"></script>
<!-- 配置及使用 -->
<script src="app.js"></script>

<style>

/*
这句很关键 如果不设置的话大小总会出现偏移的 不过按照官方的说应该是 #particles-js 也就是容器id 可不知道为啥是canvas类名
还有个问题就是我这个文件不知道从哪里来的,好像跟从官方复制的不一样,把Github上的复制到文件里就报错了
*/
.particles-js-canvas-el {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    /*z-index:-1;*/ /*有的说这句必须加 要不会阻挡前面内容 不过我这次用的时候没出现 反而会多退后一层*/
}
</style>

注意: 如果下次样式还出现偏移,就按原来官方的试试 使用#particles-js 写样式

什么是 snippet

snippet[ˈsnɪpɪt]，或者说「code snippet」，指的是能够帮助输入重复代码模式串，比如循环或条件语句，的模板。通过 snippet ，我们仅仅输入一小段代码就可以生成预定义的模板代码，甚至可以通过内部跳转快速补全模板。

This is a picture without description


15 / 54