开源项目 · 前端素材

CoolBgs 炫酷动态背景

给页面加一层会动的背景。

收录学习前端时收集和整理的动态网页背景：粒子、星空、下雨、3D 飞机、流星雨等。每个背景都是独立页面，可以直接打开看，也可以嵌到自己的站点里。

怎么用

每个背景都是独立的 HTML 页面，最省事的接入方式是把它放进一个铺满视口的 iframe，再把自己的内容放在上层：

html

<iframe src="./bgs/1/index.html" title="动态背景"></iframe>

css

iframe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: -1;
}

自己的内容需要 position: relative 或 position: absolute，否则可能被 iframe 盖住。仓库根目录的 index.html 是一个带侧边栏的预览页，可以在这里切换不同背景，再打开对应的 bgs/<编号>/index.html 单独使用。

根目录的 bgs2 里还有一批后续收集的背景。每个目录都有 preview.* 预览图，README 里也给出了 iframe 和固定定位的示例。

仓库 README 注明：素材均来源于网络，收集整理无意冒犯，如有侵权可联系删除。个人玩或者学习可以直接用；如果要公开部署、商用或放进商业项目，请自己确认素材授权，必要时替换成自己制作的背景。

动态背景会持续跑 Canvas / CSS 动画，手机上更耗电；只想要氛围、不追求强交互时，优先选粒子密度低或帧率温和的效果。

问题、建议或想要的功能，欢迎在仓库里提 Issue。