点阵网格背景特效（纯 CSS，静态/流动/呼吸三款样式）

效果演示（真实可交互）

完整代码

<div class="dot-bg"></div>

.dot-bg {
  position: relative;
  width: 100%;
  height: 320px;
  background: #0f1117;
  overflow: hidden;
}
.dot-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #7c8cf8 3px, transparent 4.5px);
  background-size: 26px 26px;
  background-position: 0 0;
}

流动点阵（增加两行）

.dot-bg::before {
  animation: dotMarch 15.6s linear infinite; /* 26px × 0.6s */
}
@keyframes dotMarch {
  from { background-position: 0 0; }
  to   { background-position: 26px 26px; }
}

呼吸光点（增加两行）

.dot-bg::before {
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

三条核心规则（背景图 + 尺寸 + 动画）即可复刻全部三款样式，没有任何 JavaScript。

参数说明

兼容性与性能

• 点阵完全由 CSS 渐变生成，不产生任何图片请求，加载零成本
• background-position 动画走合成器线程，流动效果流畅不卡顿
• 支持所有现代浏览器；radial-gradient 透明过渡写法需 Chrome 71+ / Safari 12.1+ / Firefox 65+，旧浏览器可用 background-image: radial-gradient(circle, #7c8cf8 1px, transparent 1px) 代替
• 可作为 body 背景、区块纹理、二维码占位、证件照底纹等场景使用

常见问题

Q: 如何做出「棋盘格」而不是圆点？ 把 radial-gradient 换成 linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%) 并配合 background-size 即可，这是经典的棋盘格公式。

Q: 点的大小和间距想独立调节怎么做？ 间距由 background-size 控制，点的大小由渐变里的半径数值控制，两者互不干扰，改任何一个都只会影响对应维度。

Q: 移动端性能如何？ 非常好。渐变图案由浏览器渲染层直接处理，不触发 JS 也不产生内存对象；唯一需要注意的是呼吸光点的 opacity 动画，可把时长从 2.6s 调到 4s 以上降低闪烁感。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名，可自由修改配色与参数。