's'
This commit is contained in:
30
app/cloudphone/components/ParticleBackground.tsx
Normal file
30
app/cloudphone/components/ParticleBackground.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 纯 CSS 粒子背景 - 不依赖 @tsparticles
|
||||
*/
|
||||
export function ParticleBackground() {
|
||||
const dots = Array.from({ length: 30 }, (_, i) => i);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none overflow-hidden"
|
||||
aria-hidden
|
||||
>
|
||||
{dots.map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-[var(--accent)] opacity-[0.08] animate-pulse"
|
||||
style={{
|
||||
width: `${2 + (i % 4)}px`,
|
||||
height: `${2 + (i % 4)}px`,
|
||||
left: `${(i * 7) % 100}%`,
|
||||
top: `${(i * 11) % 100}%`,
|
||||
animationDelay: `${(i % 5) * 0.5}s`,
|
||||
animationDuration: `${2 + (i % 3)}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user