简介面向前端开发者与网页设计爱好者的HTML动态背景源码合集内含星空流星、图片轮动、动态美女、雨夜街景、动态夜幕等多款酷炫背景效果可灵活嵌入官网、博客、活动专题页或个人主页在无需复杂配置的情况下显著增强页面视觉表现力。压缩包共44个文件总容量46.74MB文件类型以14个HTML示例页、8个CSS样式表、4个JavaScript脚本为主另配PNG/GIF图片资源与readme说明目录按不同效果模块分区结构清晰方便开发时定位、比较并抽取所需片段。目前已有5956人学习浏览所有示例页面均完整可运行接入自己的项目时只需按需引入对应样式与脚本、替换背景图片即可尤其适合有基础前端知识、希望快速实现高质量动态背景的开发者。整体来看是一套即取即用的前端视觉增强素材。1. 背景动态效果不难难的是选型和权重平衡html多个好看的背景动态效果(源码)这个搜索词背后通常不是缺代码而是缺一个判断标准哪种效果适合自己页面贴上去不卡、不抢内容、还能在移动端活下来。做网页开发的人都知道HTML 本质是静态文档背景动态效果必须借 CSS 动画或 Canvas/WebGL 来跑因此选型比抄代码更重要。我一般会把背景动态效果分成三档CSS 关键帧动画、Canvas 2D 粒子系统、WebGL/Shader 特效。三档的实现成本、视觉上限和性能开销逐级上升。文章就按这个梯度来聊每档都给出可以直接复制运行的完整源码并把参数拆开讲清楚。适合的场景是个人主页、产品落地页、后台登录页不适合的是数据看板、编辑器和任何需要长时间阅读的正文页。2. 动态渐变背景与漂浮光斑用 CSS 源码做出柔和氛围2.1 动态渐变背景的核心参数与适配写法先给出一段可以直接保存成.html文件运行的效果源码它展示的是背景色不断缓慢旋转的径向渐变配合两层半透明光斑做漂浮。视觉效果接近常见的“流动光效”登录页。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title渐变流动背景/title style body { margin: 0; min-height: 100vh; background: linear-gradient(125deg, #0f0c29, #302b63, #24243e); background-size: 300% 300%; animation: gradientShift 16s ease-in-out infinite; overflow: hidden; } .orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; } .orb-a { width: 300px; height: 300px; background: rgba(255, 120, 150, 0.7); top: -60px; left: -60px; animation: floatA 14s ease-in-out infinite alternate; } .orb-b { width: 420px; height: 420px; background: rgba(80, 180, 255, 0.6); bottom: -100px; right: -100px; animation: floatB 18s ease-in-out infinite alternate; } keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } keyframes floatA { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, 60px) scale(1.2); } } keyframes floatB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-100px, -80px) scale(0.85); } } /style /head body div classorb orb-a/div div classorb orb-b/div /body /htmlbackground-size: 300% 300%配合gradientShift是让渐变“动起来”的关键。如果背景尺寸等于视口background-position百分比变化时看不到明显位移放大到 300% 后才有流动感。动画时长 16s 看起来比较舒缓低于 8s 会让人产生晕眩感高于 30s 则很难察觉变化。blur(80px)这行是光斑效果的视觉核心。光斑本质只是一个圆形色块模糊值越大边缘越不可见两团颜色交汇时会自然融合。实际项目中我建议用opacity: 0.4到0.6之间太透明会丢失色彩层次太实则会脏。pointer-events: none必须写否则光斑层会挡住下方内容的鼠标事件。2.2 漂浮光斑的关键帧定义与视觉权重.orb-a和.orb-b的动画用的是alternate意为正向播完后反向播放。配合from/to两个关键帧动画会在两点之间来回移动不需要手写 0%、50%、100% 三段式。两团光斑的运动方向交叉设置左上向右下右下向左上视觉上更有“呼吸感”。移动端性能方面filter: blur在高分辨率屏幕上开销不小。一个经验是在手机上把光斑面积缩小 30% 到 40%同时把模糊值从 80px 降到 50px。视觉差异不大掉帧明显减少。CSS 动画本身由合成器处理但blur会触发像素级重新采样这是手机发热的主要来源。2.3 什么时候用 CSS 动画什么时候撤到 CanvasCSS 动画的背景效果适合“氛围型”场景渐变、光斑、浮动粒子、波浪线条。它的优点是声明式写法、浏览器自己处理帧循环不需要开发者手动管requestAnimationFrame。加上prefers-reduced-motion媒体查询可以一键降级。media (prefers-reduced-motion: reduce) { body { animation: none; background-size: 100% 100%; } .orb { display: none; } }但 CSS 方案有天花板无法做“粒子之间的连线”“鼠标拖过的尾迹”这类需要逐帧计算的效果。遇到这些需求时就得换 Canvas。判断标准也很简单如果效果能在 5 个以内的 CSS 层叠描述出来就用 CSS需要 20 个以上实例对象各自独立运动并相互影响就得用 Canvas。3. Canvas 粒子连线背景源码从绘制循环到参数调优3.1 粒子网络的最小可运行源码粒子连线是使用率最高的网页背景效果之一原理是画面上随机分布若干粒子每个粒子缓慢移动粒子之间距离小于设定阈值时就在两者之间画一条半透明线段。切换成源码来看核心逻辑其实只有三部分。// 完整可运行代码保存后即可看到粒子连线效果 const canvas document.getElementById(bg-canvas); const ctx canvas.getContext(2d); let particles []; const COUNT 60; // 粒子数量 const LINK_DIST 150; // 连线阈值单位 px const SPEED 0.5; // 粒子移动速度 function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; } class Particle { constructor() { this.x Math.random() * canvas.width; this.y Math.random() * canvas.height; this.vx (Math.random() - 0.5) * SPEED * 2; this.vy (Math.random() - 0.5) * SPEED * 2; this.r Math.random() * 2 1; // 半径 1-3px } update() { this.x this.vx; this.y this.vy; // 碰到边缘后反弹或回卷这里采用回卷 if (this.x 0) this.x canvas.width; if (this.x canvas.width) this.x 0; if (this.y 0) this.y canvas.height; if (this.y canvas.height) this.y 0; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle rgba(200, 220, 255, 0.8); ctx.fill(); } } function connectParticles() { for (let i 0; i particles.length; i) { for (let j i 1; j particles.length; j) { const dx particles[i].x - particles[j].x; const dy particles[i].y - particles[j].y; const dist Math.sqrt(dx * dx dy * dy); if (dist LINK_DIST) { const opacity 1 - dist / LINK_DIST; ctx.strokeStyle rgba(150, 190, 255, ${opacity * 0.5}); ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke(); } } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.update(); p.draw(); }); connectParticles(); requestAnimationFrame(animate); } function init() { resizeCanvas(); particles Array.from({ length: COUNT }, () new Particle()); animate(); } window.addEventListener(resize, resizeCanvas); init();配合这段 HTML 骨架就能跑起来!DOCTYPE html html langzh-cn head meta charsetutf-8 style html, body { margin: 0; height: 100%; } #bg-canvas { position: fixed; top: 0; left: 0; z-index: -1; } /style /head body canvas idbg-canvas/canvas /body /html代码里的关键是connectParticles的双重循环。j从i1开始避免两根粒子之间重复绘制两次线段这在大数据量下能省一半的stroke调用。线段透明度根据距离衰减线是慢慢淡入淡出的视觉上比一出现就完全实线自然得多。3.2 粒子数量、连线距离与速度的调参逻辑几个核心参数需要根据实际页面调整这里给出一组经过验证的参考值参数桌面端推荐值移动端推荐值影响COUNT60-10030-50数量翻倍连线数量近似平方级增长LINK_DIST120-18080-120越大连线越密背景越“糊”SPEED0.3-0.80.3-0.5快则干扰阅读慢则接近静态r粒子半径1-31-2半径过大会像噪点注意LINK_DIST不能只做减法。移动端屏幕宽度小同样距离在视觉上跨过的相对宽度更大同时粒子数量少LINK_DIST需要相应缩小否则画面里会出现大量游离的孤立粒子。3.3 内存与 DPR 适配问题Canvas 在高 DPI 屏幕上默认会渲染出模糊效果。常见做法是把画布尺寸按设备像素比放大。function resizeCanvas() { const dpr Math.min(window.devicePixelRatio || 1, 2); canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; canvas.style.width window.innerWidth px; canvas.style.height window.innerHeight px; ctx.scale(dpr, dpr); }我一般把dpr限制在 2 以内。手机端 3 倍屏全尺寸渲染时Canvas 的像素总量接近 4K 屏粒子连线动效会出现明显发热。实际操作中还有一个坑resize事件执行时会先scale再resize导致缩放翻倍。解决方法是先ctx.setTransform(1,0,0,1,0,0)重置再设置宽高最后重新scale。4. 高质感星空与鼠标跟随源码分层设计与交互细节4.1 多层星空与极光效果的源码结构星空背景比粒子连线更吃性能但视觉冲击力也更强。核心思路是分三层静态星星、缓缓流动的极光、偶尔掠过的流星。每层独立绘制最后合并到同一个 Canvas 画布上。class StarField { constructor(canvas) { this.canvas canvas; this.ctx canvas.getContext(2d); this.stars []; this.meteors []; } init() { const count Math.floor(window.innerWidth * window.innerHeight / 7000); for (let i 0; i count; i) { this.stars.push({ x: Math.random() * this.canvas.width, y: Math.random() * this.canvas.height, r: Math.random() * 1.8, twinkleSpeed: Math.random() * 0.05 0.02, phase: Math.random() * Math.PI * 2 }); } } drawStars(time) { const ctx this.ctx; this.stars.forEach(star { const alpha 0.4 0.6 * Math.abs(Math.sin(time * star.twinkleSpeed star.phase)); ctx.beginPath(); ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2); ctx.fillStyle rgba(255, 255, 255, ${alpha}); ctx.fill(); }); } drawAurora(time) { const ctx this.ctx; const grad ctx.createLinearGradient(0, 0, this.canvas.width, 0); grad.addColorStop(0, rgba(0, 255, 180, 0.03)); grad.addColorStop(0.5, rgba(80, 200, 255, ${0.05 Math.sin(time / 3000) * 0.02})); grad.addColorStop(1, rgba(0, 100, 255, 0.03)); ctx.fillStyle grad; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height * 0.4); } loop(time) { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawAurora(time); this.drawStars(time); requestAnimationFrame(this.loop.bind(this)); } }星星数量用innerWidth * innerHeight / 7000计算这句是性能与密度的平衡点。以 1920x1080 的屏幕为例算出约 296 个星星如果是手机 375x812则只有 43 个。不同屏幕看到的星星密度接近一致不会出现桌面端满天星、手机端挤成一团的问题。闪烁效果使用正弦函数Math.abs(Math.sin(...))每一帧透明度随时间和各自相位变化。每个星星有自己的twinkleSpeed和phase避免整屏星星同步呼吸的廉价感。极光层使用线性渐变加透明度波动Math.sin(time / 3000)的频率很低肉眼看到的是颜色范围在 20 秒周期里缓慢起伏不是快速闪烁。4.2 鼠标交互的节流与坐标归一化鼠标跟随效果通常是在 Canvas 上监听mousemove让特效元素朝指针位置偏移。这里的坑在于鼠标每像素移动都会触发事件厂商游戏鼠标的高回报率会让事件每秒触发数百次如果每次都做全面的 Canvas 重绘CPU 会迅速飙升。let mouse { x: -1000, y: -1000, active: false }; let ticking false; canvas.addEventListener(mousemove, (e) { if (ticking) return; ticking true; requestAnimationFrame(() { const rect canvas.getBoundingClientRect(); mouse.x e.clientX - rect.left; mouse.y e.clientY - rect.top; mouse.active true; ticking false; }); }); canvas.addEventListener(mouseleave, () { mouse.active false; mouse.x -1000; mouse.y -1000; });ticking这个标志位做的是 RAF 节流在一次requestAnimationFrame没执行完之前后续的mousemove事件直接被忽略。这样事件频率再高实际更新也不会超过屏幕刷新率。鼠标移出画布后把坐标拉到屏幕外同时停用active标志避免鼠标留在视口内时特效一直吸附在某个角落。鼠标坐标要减掉getBoundingClientRect()的偏移量原因很简单如果 Canvas 的 CSS 尺寸和实际占位框有偏移或者页面上方有导航栏clientX/clientY是相对视口左上角的直接使用会导致跟随光斑出现每帧都有的固定偏差。4.3 交互效果的位置更新策略跟随鼠标的光斑在绘制时不要直接arc(mouse.x, mouse.y, 40, ...)。常见的做法是给光斑一个独立的坐标变量让它每帧朝鼠标位置缓动。let glowX -500, glowY -500; let targetX -500, targetY -500; function loop(time) { targetX mouse.active ? mouse.x : -500; targetY mouse.active ? mouse.y : -500; // 缓动系数 0.08帧率越高追得越快此处依赖帧时间不精确但够用 glowX (targetX - glowX) * 0.08; glowY (targetY - glowY) * 0.08; ctx.beginPath(); ctx.arc(glowX, glowY, 40, 0, Math.PI * 2); const grad ctx.createRadialGradient(glowX, glowY, 0, glowX, glowY, 40); grad.addColorStop(0, rgba(255, 255, 255, 0.35)); grad.addColorStop(1, rgba(255, 255, 255, 0)); ctx.fillStyle grad; ctx.fill(); requestAnimationFrame(loop); }缓动系数0.08的含义是每帧移动剩余距离的 8%所以鼠标快速划过时光斑会表现为“拖尾式追赶”而不是瞬间贴上去。系数越大贴得越快越小越飘。需要说明的是这种写法依赖实际帧率但帧率差异带来的观感差别没那么大真要在 120Hz 和 60Hz 屏幕上表现一致得引入deltaTime做时间插值多数背景动效场景不需要这个复杂度。5. 多套背景源码的切换方案与 Web 性能验证方法5.1 用模块化函数统一多套动效的开关入口做个人主页或作品集时常常需要在多个背景效果之间切换。常见做法是定义两个全局函数destroyBackground()和mountBackground(type)保证同一时刻只有一套动效在跑。const backgroundRegistry { gradient: mountGradient, particles: mountParticles, starfield: mountStarfield }; let currentCleanup null; function mountBackground(type) { if (!backgroundRegistry[type]) { throw new Error(Unknown background type: ${type}); } destroyBackground(); currentCleanup backgroundRegistry[type](); } function destroyBackground() { if (currentCleanup) { currentCleanup(); currentCleanup null; } }每个mountXxx函数内部创建自己的 DOM 节点或 Canvas并返回一个清理函数清理函数负责移除节点、解绑事件、取消requestAnimationFrame。这个模式的要点是Canvas 动效挂在body上之后切换时只删除画布是不够的RAF 循环可能还在跑。正确做法是把循环函数出口记下来在清理时cancelAnimationFrame否则会出现切换页面后动画还在后台消耗 CPU。5.2 用requestAnimationFrame计数器验证 FPS手边没有性能监控工具时可以通过 RAF 的触发间隔估算当前帧率。let lastFrameTime performance.now(); let fps 0; let frameCount 0; let fpsTimer performance.now(); function measureFPS() { const now performance.now(); frameCount; if (now - fpsTimer 1000) { fps frameCount; frameCount 0; fpsTimer now; } requestAnimationFrame(measureFPS); }这段代码每秒统计一次requestAnimationFrame被调用的次数。如果fps稳定在 55 以上说明动效层没有阻塞主线程如果掉到 30 以下就该按上面的参数表格逐项削减。我通常会打开浏览器开发者工具的 Rendering 面板勾选 FPS meter同时启用 Paint flashing 查看重绘区域如果整个视口每秒都在闪烁说明动效绘制范围太大需要考虑缩窄 Canvas 尺寸或改用分区重绘。5.3 背景动效与内容层的 z-index 约定最后一个值得养成的习惯所有背景动效容器统一挂在body的第一个子元素位置上CSS 里固定为position: fixed; inset: 0; z-index: -1。内容区不需要任何z-index调整也能正常显示在动效上方。这个方案的问题是如果中间有元素设置了背景色会盖住 Canvas但反过来看这也是做内容卡片层次时可以利用的特性半透明内容卡片直接透过 Canvas 露出背后的动效比叠加遮罩层省一张位图。本文还有配套的精品资源点击获取
HTML背景动态效果源码：CSS动画与Canvas粒子性能选型实践
简介面向前端开发者与网页设计爱好者的HTML动态背景源码合集内含星空流星、图片轮动、动态美女、雨夜街景、动态夜幕等多款酷炫背景效果可灵活嵌入官网、博客、活动专题页或个人主页在无需复杂配置的情况下显著增强页面视觉表现力。压缩包共44个文件总容量46.74MB文件类型以14个HTML示例页、8个CSS样式表、4个JavaScript脚本为主另配PNG/GIF图片资源与readme说明目录按不同效果模块分区结构清晰方便开发时定位、比较并抽取所需片段。目前已有5956人学习浏览所有示例页面均完整可运行接入自己的项目时只需按需引入对应样式与脚本、替换背景图片即可尤其适合有基础前端知识、希望快速实现高质量动态背景的开发者。整体来看是一套即取即用的前端视觉增强素材。1. 背景动态效果不难难的是选型和权重平衡html多个好看的背景动态效果(源码)这个搜索词背后通常不是缺代码而是缺一个判断标准哪种效果适合自己页面贴上去不卡、不抢内容、还能在移动端活下来。做网页开发的人都知道HTML 本质是静态文档背景动态效果必须借 CSS 动画或 Canvas/WebGL 来跑因此选型比抄代码更重要。我一般会把背景动态效果分成三档CSS 关键帧动画、Canvas 2D 粒子系统、WebGL/Shader 特效。三档的实现成本、视觉上限和性能开销逐级上升。文章就按这个梯度来聊每档都给出可以直接复制运行的完整源码并把参数拆开讲清楚。适合的场景是个人主页、产品落地页、后台登录页不适合的是数据看板、编辑器和任何需要长时间阅读的正文页。2. 动态渐变背景与漂浮光斑用 CSS 源码做出柔和氛围2.1 动态渐变背景的核心参数与适配写法先给出一段可以直接保存成.html文件运行的效果源码它展示的是背景色不断缓慢旋转的径向渐变配合两层半透明光斑做漂浮。视觉效果接近常见的“流动光效”登录页。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title渐变流动背景/title style body { margin: 0; min-height: 100vh; background: linear-gradient(125deg, #0f0c29, #302b63, #24243e); background-size: 300% 300%; animation: gradientShift 16s ease-in-out infinite; overflow: hidden; } .orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; } .orb-a { width: 300px; height: 300px; background: rgba(255, 120, 150, 0.7); top: -60px; left: -60px; animation: floatA 14s ease-in-out infinite alternate; } .orb-b { width: 420px; height: 420px; background: rgba(80, 180, 255, 0.6); bottom: -100px; right: -100px; animation: floatB 18s ease-in-out infinite alternate; } keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } keyframes floatA { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, 60px) scale(1.2); } } keyframes floatB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-100px, -80px) scale(0.85); } } /style /head body div classorb orb-a/div div classorb orb-b/div /body /htmlbackground-size: 300% 300%配合gradientShift是让渐变“动起来”的关键。如果背景尺寸等于视口background-position百分比变化时看不到明显位移放大到 300% 后才有流动感。动画时长 16s 看起来比较舒缓低于 8s 会让人产生晕眩感高于 30s 则很难察觉变化。blur(80px)这行是光斑效果的视觉核心。光斑本质只是一个圆形色块模糊值越大边缘越不可见两团颜色交汇时会自然融合。实际项目中我建议用opacity: 0.4到0.6之间太透明会丢失色彩层次太实则会脏。pointer-events: none必须写否则光斑层会挡住下方内容的鼠标事件。2.2 漂浮光斑的关键帧定义与视觉权重.orb-a和.orb-b的动画用的是alternate意为正向播完后反向播放。配合from/to两个关键帧动画会在两点之间来回移动不需要手写 0%、50%、100% 三段式。两团光斑的运动方向交叉设置左上向右下右下向左上视觉上更有“呼吸感”。移动端性能方面filter: blur在高分辨率屏幕上开销不小。一个经验是在手机上把光斑面积缩小 30% 到 40%同时把模糊值从 80px 降到 50px。视觉差异不大掉帧明显减少。CSS 动画本身由合成器处理但blur会触发像素级重新采样这是手机发热的主要来源。2.3 什么时候用 CSS 动画什么时候撤到 CanvasCSS 动画的背景效果适合“氛围型”场景渐变、光斑、浮动粒子、波浪线条。它的优点是声明式写法、浏览器自己处理帧循环不需要开发者手动管requestAnimationFrame。加上prefers-reduced-motion媒体查询可以一键降级。media (prefers-reduced-motion: reduce) { body { animation: none; background-size: 100% 100%; } .orb { display: none; } }但 CSS 方案有天花板无法做“粒子之间的连线”“鼠标拖过的尾迹”这类需要逐帧计算的效果。遇到这些需求时就得换 Canvas。判断标准也很简单如果效果能在 5 个以内的 CSS 层叠描述出来就用 CSS需要 20 个以上实例对象各自独立运动并相互影响就得用 Canvas。3. Canvas 粒子连线背景源码从绘制循环到参数调优3.1 粒子网络的最小可运行源码粒子连线是使用率最高的网页背景效果之一原理是画面上随机分布若干粒子每个粒子缓慢移动粒子之间距离小于设定阈值时就在两者之间画一条半透明线段。切换成源码来看核心逻辑其实只有三部分。// 完整可运行代码保存后即可看到粒子连线效果 const canvas document.getElementById(bg-canvas); const ctx canvas.getContext(2d); let particles []; const COUNT 60; // 粒子数量 const LINK_DIST 150; // 连线阈值单位 px const SPEED 0.5; // 粒子移动速度 function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; } class Particle { constructor() { this.x Math.random() * canvas.width; this.y Math.random() * canvas.height; this.vx (Math.random() - 0.5) * SPEED * 2; this.vy (Math.random() - 0.5) * SPEED * 2; this.r Math.random() * 2 1; // 半径 1-3px } update() { this.x this.vx; this.y this.vy; // 碰到边缘后反弹或回卷这里采用回卷 if (this.x 0) this.x canvas.width; if (this.x canvas.width) this.x 0; if (this.y 0) this.y canvas.height; if (this.y canvas.height) this.y 0; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle rgba(200, 220, 255, 0.8); ctx.fill(); } } function connectParticles() { for (let i 0; i particles.length; i) { for (let j i 1; j particles.length; j) { const dx particles[i].x - particles[j].x; const dy particles[i].y - particles[j].y; const dist Math.sqrt(dx * dx dy * dy); if (dist LINK_DIST) { const opacity 1 - dist / LINK_DIST; ctx.strokeStyle rgba(150, 190, 255, ${opacity * 0.5}); ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke(); } } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.update(); p.draw(); }); connectParticles(); requestAnimationFrame(animate); } function init() { resizeCanvas(); particles Array.from({ length: COUNT }, () new Particle()); animate(); } window.addEventListener(resize, resizeCanvas); init();配合这段 HTML 骨架就能跑起来!DOCTYPE html html langzh-cn head meta charsetutf-8 style html, body { margin: 0; height: 100%; } #bg-canvas { position: fixed; top: 0; left: 0; z-index: -1; } /style /head body canvas idbg-canvas/canvas /body /html代码里的关键是connectParticles的双重循环。j从i1开始避免两根粒子之间重复绘制两次线段这在大数据量下能省一半的stroke调用。线段透明度根据距离衰减线是慢慢淡入淡出的视觉上比一出现就完全实线自然得多。3.2 粒子数量、连线距离与速度的调参逻辑几个核心参数需要根据实际页面调整这里给出一组经过验证的参考值参数桌面端推荐值移动端推荐值影响COUNT60-10030-50数量翻倍连线数量近似平方级增长LINK_DIST120-18080-120越大连线越密背景越“糊”SPEED0.3-0.80.3-0.5快则干扰阅读慢则接近静态r粒子半径1-31-2半径过大会像噪点注意LINK_DIST不能只做减法。移动端屏幕宽度小同样距离在视觉上跨过的相对宽度更大同时粒子数量少LINK_DIST需要相应缩小否则画面里会出现大量游离的孤立粒子。3.3 内存与 DPR 适配问题Canvas 在高 DPI 屏幕上默认会渲染出模糊效果。常见做法是把画布尺寸按设备像素比放大。function resizeCanvas() { const dpr Math.min(window.devicePixelRatio || 1, 2); canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; canvas.style.width window.innerWidth px; canvas.style.height window.innerHeight px; ctx.scale(dpr, dpr); }我一般把dpr限制在 2 以内。手机端 3 倍屏全尺寸渲染时Canvas 的像素总量接近 4K 屏粒子连线动效会出现明显发热。实际操作中还有一个坑resize事件执行时会先scale再resize导致缩放翻倍。解决方法是先ctx.setTransform(1,0,0,1,0,0)重置再设置宽高最后重新scale。4. 高质感星空与鼠标跟随源码分层设计与交互细节4.1 多层星空与极光效果的源码结构星空背景比粒子连线更吃性能但视觉冲击力也更强。核心思路是分三层静态星星、缓缓流动的极光、偶尔掠过的流星。每层独立绘制最后合并到同一个 Canvas 画布上。class StarField { constructor(canvas) { this.canvas canvas; this.ctx canvas.getContext(2d); this.stars []; this.meteors []; } init() { const count Math.floor(window.innerWidth * window.innerHeight / 7000); for (let i 0; i count; i) { this.stars.push({ x: Math.random() * this.canvas.width, y: Math.random() * this.canvas.height, r: Math.random() * 1.8, twinkleSpeed: Math.random() * 0.05 0.02, phase: Math.random() * Math.PI * 2 }); } } drawStars(time) { const ctx this.ctx; this.stars.forEach(star { const alpha 0.4 0.6 * Math.abs(Math.sin(time * star.twinkleSpeed star.phase)); ctx.beginPath(); ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2); ctx.fillStyle rgba(255, 255, 255, ${alpha}); ctx.fill(); }); } drawAurora(time) { const ctx this.ctx; const grad ctx.createLinearGradient(0, 0, this.canvas.width, 0); grad.addColorStop(0, rgba(0, 255, 180, 0.03)); grad.addColorStop(0.5, rgba(80, 200, 255, ${0.05 Math.sin(time / 3000) * 0.02})); grad.addColorStop(1, rgba(0, 100, 255, 0.03)); ctx.fillStyle grad; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height * 0.4); } loop(time) { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawAurora(time); this.drawStars(time); requestAnimationFrame(this.loop.bind(this)); } }星星数量用innerWidth * innerHeight / 7000计算这句是性能与密度的平衡点。以 1920x1080 的屏幕为例算出约 296 个星星如果是手机 375x812则只有 43 个。不同屏幕看到的星星密度接近一致不会出现桌面端满天星、手机端挤成一团的问题。闪烁效果使用正弦函数Math.abs(Math.sin(...))每一帧透明度随时间和各自相位变化。每个星星有自己的twinkleSpeed和phase避免整屏星星同步呼吸的廉价感。极光层使用线性渐变加透明度波动Math.sin(time / 3000)的频率很低肉眼看到的是颜色范围在 20 秒周期里缓慢起伏不是快速闪烁。4.2 鼠标交互的节流与坐标归一化鼠标跟随效果通常是在 Canvas 上监听mousemove让特效元素朝指针位置偏移。这里的坑在于鼠标每像素移动都会触发事件厂商游戏鼠标的高回报率会让事件每秒触发数百次如果每次都做全面的 Canvas 重绘CPU 会迅速飙升。let mouse { x: -1000, y: -1000, active: false }; let ticking false; canvas.addEventListener(mousemove, (e) { if (ticking) return; ticking true; requestAnimationFrame(() { const rect canvas.getBoundingClientRect(); mouse.x e.clientX - rect.left; mouse.y e.clientY - rect.top; mouse.active true; ticking false; }); }); canvas.addEventListener(mouseleave, () { mouse.active false; mouse.x -1000; mouse.y -1000; });ticking这个标志位做的是 RAF 节流在一次requestAnimationFrame没执行完之前后续的mousemove事件直接被忽略。这样事件频率再高实际更新也不会超过屏幕刷新率。鼠标移出画布后把坐标拉到屏幕外同时停用active标志避免鼠标留在视口内时特效一直吸附在某个角落。鼠标坐标要减掉getBoundingClientRect()的偏移量原因很简单如果 Canvas 的 CSS 尺寸和实际占位框有偏移或者页面上方有导航栏clientX/clientY是相对视口左上角的直接使用会导致跟随光斑出现每帧都有的固定偏差。4.3 交互效果的位置更新策略跟随鼠标的光斑在绘制时不要直接arc(mouse.x, mouse.y, 40, ...)。常见的做法是给光斑一个独立的坐标变量让它每帧朝鼠标位置缓动。let glowX -500, glowY -500; let targetX -500, targetY -500; function loop(time) { targetX mouse.active ? mouse.x : -500; targetY mouse.active ? mouse.y : -500; // 缓动系数 0.08帧率越高追得越快此处依赖帧时间不精确但够用 glowX (targetX - glowX) * 0.08; glowY (targetY - glowY) * 0.08; ctx.beginPath(); ctx.arc(glowX, glowY, 40, 0, Math.PI * 2); const grad ctx.createRadialGradient(glowX, glowY, 0, glowX, glowY, 40); grad.addColorStop(0, rgba(255, 255, 255, 0.35)); grad.addColorStop(1, rgba(255, 255, 255, 0)); ctx.fillStyle grad; ctx.fill(); requestAnimationFrame(loop); }缓动系数0.08的含义是每帧移动剩余距离的 8%所以鼠标快速划过时光斑会表现为“拖尾式追赶”而不是瞬间贴上去。系数越大贴得越快越小越飘。需要说明的是这种写法依赖实际帧率但帧率差异带来的观感差别没那么大真要在 120Hz 和 60Hz 屏幕上表现一致得引入deltaTime做时间插值多数背景动效场景不需要这个复杂度。5. 多套背景源码的切换方案与 Web 性能验证方法5.1 用模块化函数统一多套动效的开关入口做个人主页或作品集时常常需要在多个背景效果之间切换。常见做法是定义两个全局函数destroyBackground()和mountBackground(type)保证同一时刻只有一套动效在跑。const backgroundRegistry { gradient: mountGradient, particles: mountParticles, starfield: mountStarfield }; let currentCleanup null; function mountBackground(type) { if (!backgroundRegistry[type]) { throw new Error(Unknown background type: ${type}); } destroyBackground(); currentCleanup backgroundRegistry[type](); } function destroyBackground() { if (currentCleanup) { currentCleanup(); currentCleanup null; } }每个mountXxx函数内部创建自己的 DOM 节点或 Canvas并返回一个清理函数清理函数负责移除节点、解绑事件、取消requestAnimationFrame。这个模式的要点是Canvas 动效挂在body上之后切换时只删除画布是不够的RAF 循环可能还在跑。正确做法是把循环函数出口记下来在清理时cancelAnimationFrame否则会出现切换页面后动画还在后台消耗 CPU。5.2 用requestAnimationFrame计数器验证 FPS手边没有性能监控工具时可以通过 RAF 的触发间隔估算当前帧率。let lastFrameTime performance.now(); let fps 0; let frameCount 0; let fpsTimer performance.now(); function measureFPS() { const now performance.now(); frameCount; if (now - fpsTimer 1000) { fps frameCount; frameCount 0; fpsTimer now; } requestAnimationFrame(measureFPS); }这段代码每秒统计一次requestAnimationFrame被调用的次数。如果fps稳定在 55 以上说明动效层没有阻塞主线程如果掉到 30 以下就该按上面的参数表格逐项削减。我通常会打开浏览器开发者工具的 Rendering 面板勾选 FPS meter同时启用 Paint flashing 查看重绘区域如果整个视口每秒都在闪烁说明动效绘制范围太大需要考虑缩窄 Canvas 尺寸或改用分区重绘。5.3 背景动效与内容层的 z-index 约定最后一个值得养成的习惯所有背景动效容器统一挂在body的第一个子元素位置上CSS 里固定为position: fixed; inset: 0; z-index: -1。内容区不需要任何z-index调整也能正常显示在动效上方。这个方案的问题是如果中间有元素设置了背景色会盖住 Canvas但反过来看这也是做内容卡片层次时可以利用的特性半透明内容卡片直接透过 Canvas 露出背后的动效比叠加遮罩层省一张位图。本文还有配套的精品资源点击获取
