我做了一个登陆页面,我从react导入了tsparticles,但是它们出现在整个网站上,我被困在如何在hero/header组件上显示它们。
我试着在头文件中调用Particles组件而不是App,但是没有任何改变。以下是我用于Particles配置的代码
<Particles
id="tsparticles"
init={particlesInit}
options={{
fullScreen: {
zIndex:1,
enable: true,
},
background: {
color: {
value: "##",
},
},
fpsLimit: 30,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 100,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.3,
width: 1,
},
collisions: {
enable: true,
},
move: {
directions: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 2,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.2,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 4 },
},
},
detectRetina: true,
}}
/>
1条答案
按热度按时间ryevplcw1#
tsParticle React文档列出了Particles元素的可用属性(此处列出)。其中之一是
style
属性。该文档在这一点上相当模糊,但似乎可以设置Particle画布的样式。默认情况下,画布设置为
position: fixed
,其大小和位置可以填充屏幕。在你的标题中的粒子元素上,看看你会得到什么。