1.安装angular-particle
npm install angular-particle --save
2.使用该组件的module.ts中导入模块
3.对应的html中
<particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>
4.对应的component.ts中定义如下
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myStyle: object = {};
myParams: object = {};
width: number = 100;
height: number = 100;
ngOnInit() {
this.myStyle = {
'position': 'fixed',
'width': '100%',
'height': '100%',
'z-index': -1,
'top': 0,
'left': 0,
'right': 0,
'bottom': 0,
'background-color': '#ccc'
};
this.myParams = {
particles: {
number: {
value: 80,
},
color: {
value: '#fff'
},
shape: {
type: 'triangle',
},
move:{
attract:{
enable:true
}
}
}
};
}
效果图: