动态波点背景

Polka Dot BG

A clean, gently drifting polka dot pattern. Lightweight and perfect for modern UI.

这是一个背景组件，使用 CSS 的“radial-gradient”来绘制轻量且干净的圆点图案。它不使用任何图像，因此加载速度快并且完全可定制。

用例和功能

LP和英雄部分：作为主视觉的背景，添加一个不太强烈的动作以给人现代的印象。
卡片和模态的背景：当您厌倦了简单的单色背景时，非常适合作为强调。
性能：由于仅使用CSS完成，而不加载图像（SVG或PNG），因此不会对LCP（Largest Contentful Paint）产生负面影响。

设计和用户体验（Design & UX）的要点

微妙的动画：使用“变换”缓慢地对角移动，为静态页面带来深度和节奏。
晕影效果：图案在中心清晰可见，并且向边缘混合到背景颜色的覆盖层（“径向渐变”）增加了上面放置的文本和内容的可见性。
兼容深色模式：旨在通过利用 :global(.dark) 类和媒体查询无缝切换背景颜色和点颜色。

如何定制（定制指南）

您只需更改 CSS 变量即可轻松调整点的大小和间距。

--dot-size：点半径（例如，2px 会使其变大）
--dot-space：点之间的空间（例如32px会降低密度）
--dot-color-light / --dot-color-dark：更改点颜色。我们建议选择与您的主题颜色相匹配的浅色。

实现代码（Implementation）

export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
  <div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
    {/* Polka Dot Pattern */}
    <div className="polka-dots absolute inset-0"></div>
    
    {/* Vignette Overlay */}
    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
    
    {/* Content */}
    <div className="relative z-10">
      {children}
    </div>
  </div>
);
};

浏览器支持

完全支持所有现代浏览器（Chrome、Firefox、Safari、Edge）。由于它是使用 GPU 加速的“变换”进行动画处理的，因此即使在滚动或执行其他繁重处理时也能非常流畅地工作。