1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
| // 背景动画设置
| const particlesOption = {
| fpsLimit: 60,
| interactivity: {
| detectsOn: 'canvas',
| events: {
| onClick: { // 开启鼠标点击的效果
| enable: true,
| mode: 'push'
| },
| onHover: { // 开启鼠标悬浮的效果(线条跟着鼠标移动)
| enable: true,
| mode: 'grab'
| },
| resize: true
| },
| modes: { // 配置动画效果
| bubble: {
| distance: 400,
| duration: 2,
| opacity: 0.8,
| size: 40
| },
| push: {
| quantity: 4
| },
| grab: {
| distance: 200,
| duration: 0.4
| },
| attract: { // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
| distance: 200,
| duration: 0.4,
| factor: 5
| }
| }
| },
| particles: {
| color: {
| value: '#FFF' // 粒子点的颜色
| },
| links: {
| color: '#FFF', // 线条颜色
| distance: 150,
| enable: true,
| opacity: 0.5, // 不透明度
| width: 2 // 线条宽度
| },
| collisions: {
| enable: true
| },
| move: {
| attract: { enable: false, rotateX: 600, rotateY: 1200 },
| bounce: false,
| direction: 'none',
| enable: true,
| out_mode: 'out',
| random: false,
| speed: 1, // 移动速度
| straight: false
| },
| number: {
| density: {
| enable: true,
| value_area: 800
| },
| value: 80
| },
| opacity: {
| value: 0.5
| },
| shape: {
| type: 'circle'
| },
| size: {
| random: true,
| value: 5
| }
| },
| detectRetina: true
| }
| export default particlesOption
|
|
