用 AI 写一段“会动的代码背景”：网页能挂，PPT 也能当背景

你是不是也刷到过那种“代码生成的动态背景”？

看着像黑客电影的开场，或者极简的流体渐变。拿来当网页背景、PPT 背景都很顶。

关键是：这玩意真不用手写。让 AI 出代码，你复制粘贴，跑起来就行。😎

下面给你三种常用方案，从“最省事”到“最有质感”。每一种都能直接当背景用。

你想要的背景，大概率就这三类

氛围渐变：像苹果发布会那种柔和流动的彩色背景。
粒子/点线：科技感。适合产品介绍、数据汇报。
流体/波纹/噪声：更“高级”，看着像 Shader。

如果你只是想让 PPT 看起来更贵一点，渐变 + 少量噪声已经能打死一堆模板了。

让 AI 按你想法吐代码：直接抄这个提示词

把下面这段丢给 ChatGPT / Claude / 任何代码强的模型，然后把你的需求改一下就行。

提示词模板

你是资深前端动效工程师。请生成一个单文件 HTML（含 CSS + JS），全屏动态背景，要求：

背景覆盖整个浏览器窗口，自动适配屏幕大小

动画循环平滑，不要闪烁

代码可直接保存为 bg.html 打开运行

提供两个可调参数：速度 speed、颜色强度 intensity

性能要好，60fps 优先视觉风格：{写你的风格，比如“柔和渐变/科技粒子/流体噪声”}

你拿到代码后，别急着改。先跑起来。能动了再调参数。

方案一：CSS 动态渐变（最省事，PPT 也最友好）

这套适合：你明天就要交 PPT，但还想装一下。

把下面存成 bg.html，双击打开就能看到。

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>CSS 动态渐变背景</title>
<style>
  :root{
    --speed: 18s;      /* 越小越快 */
    --intensity: 1;    /* 0.6~1.4 之间试 */
  }
  html,body{height:100%;margin:0;}
  body{
    overflow:hidden;
    background:#0b0f1a;
  }
  .bg{
    position:fixed;
    inset:-30%;
    background:
      radial-gradient(circle at 20% 30%, rgba(124,92,255, calc(.65 * var(--intensity))), transparent 55%),
      radial-gradient(circle at 80% 20%, rgba(0,209,255, calc(.55 * var(--intensity))), transparent 55%),
      radial-gradient(circle at 60% 80%, rgba(255,66,161, calc(.45 * var(--intensity))), transparent 60%),
      radial-gradient(circle at 30% 80%, rgba(255,183,0,  calc(.25 * var(--intensity))), transparent 60%);
    filter: blur(40px) saturate(120%);
    animation: drift var(--speed) ease-in-out infinite alternate;
    transform: translate3d(0,0,0);
  }
  @keyframes drift{
    0%   { transform: translate(-2%, -1%) scale(1.05) rotate(-2deg); }
    100% { transform: translate( 2%,  1%) scale(1.10) rotate( 2deg); }
  }

  /* 一点点噪声，会显得“贵” */
  .noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.08;
    mix-blend-mode: overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity=".6"/></svg>');
  }
</style>
</head>
<body>
  <div class="bg"></div>
  <div class="noise"></div>
</body>
</html>

你能怎么用

做网页背景：直接把 .bg 放在页面最底层。
做 PPT 背景：录屏或导出成 MP4（后面教）。

方案二：Canvas 粒子背景（科技感，适合发布会/产品页）

这套适合：你做的是产品介绍、融资 BP、数据看板那类。

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Canvas 粒子背景</title>
<style>
  :root{ --speed: 1; --intensity: 1; }
  html,body{height:100%;margin:0;background:#070a12;}
  canvas{display:block;width:100vw;height:100vh;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

const cfg = {
  speed: 1,      // 0.5~2
  intensity: 1,  // 0.6~1.6
  count: 120
};

let w, h, dpr;
function resize(){
  dpr = Math.min(2, window.devicePixelRatio || 1);
  w = Math.floor(innerWidth * dpr);
  h = Math.floor(innerHeight * dpr);
  canvas.width = w;
  canvas.height = h;
}
addEventListener('resize', resize);
resize();

function rnd(a,b){return a+Math.random()*(b-a)}

const pts = Array.from({length: cfg.count}, () => ({
  x: rnd(0,w), y: rnd(0,h),
  vx: rnd(-0.35,0.35), vy: rnd(-0.25,0.25),
  r: rnd(1,2.2)
}));

function step(){
  ctx.clearRect(0,0,w,h);
  ctx.fillStyle = 'rgba(7,10,18,0.35)';
  ctx.fillRect(0,0,w,h);

  // 点
  for (const p of pts){
    p.x += p.vx * dpr * 60/60 * cfg.speed;
    p.y += p.vy * dpr * 60/60 * cfg.speed;

    if (p.x < 0) p.x += w; if (p.x > w) p.x -= w;
    if (p.y < 0) p.y += h; if (p.y > h) p.y -= h;

    ctx.beginPath();
    ctx.arc(p.x,p.y,p.r*dpr,0,Math.PI*2);
    ctx.fillStyle = `rgba(120,180,255,${0.65*cfg.intensity})`;
    ctx.fill();
  }

  // 线
  for (let i=0;i<pts.length;i++){
    for (let j=i+1;j<pts.length;j++){
      const a = pts[i], b = pts[j];
      const dx=a.x-b.x, dy=a.y-b.y;
      const dist = Math.hypot(dx,dy);
      const max = 140*dpr;
      if (dist < max){
        const alpha = (1 - dist/max) * 0.35 * cfg.intensity;
        ctx.strokeStyle = `rgba(120,180,255,${alpha})`;
        ctx.lineWidth = 1*dpr;
        ctx.beginPath();
        ctx.moveTo(a.x,a.y);
        ctx.lineTo(b.x,b.y);
        ctx.stroke();
      }
    }
  }

  requestAnimationFrame(step);
}
step();
</script>
</body>
</html>

想更“稳”，就改这三处

count 别太大。PPT 背景用，120 左右很舒服。
max（连线距离）别太大，否则线多会糊。
颜色别太亮。背景抢戏，观众看你的字还是看你的点？

方案三：想要 Shader 那种质感？用 AI 生成 WebGL 版本

这块我不直接硬塞一大段 WebGL 代码了（你复制了也未必想看）。

更实用的做法：你让 AI 按你的风格出一份“可运行的 GLSL/three.js shader demo”。

把这个提示词丢给模型：

生成一个 three.js 单文件 HTML demo（CDN 引入 three.js），全屏 shader 背景。风格是“流体噪声 + 柔和霓虹渐变”，要有时间动画。提供 speed/intensity 两个参数。页面不要任何 UI。

拿到之后，你只做一件事：能跑起来。

跑起来后再让 AI 帮你迭代：

“颜色往蓝紫走，少点粉”
“噪声颗粒更细，运动慢一点”
“不要太闪，适合做 PPT 背景”

这比你自己手搓 GLSL 快太多。

把动态背景塞进 PPT：导出成 MP4（最通用）

PPT 对“网页动态背景”支持很一般。

最稳的方式：把它录成 MP4，当视频背景插入 PPT。

方法 A：浏览器录屏（最快）

打开 bg.html
Chrome 按 Ctrl+Shift+I 只是为了确保你没开奇怪插件（不开也行）
用系统录屏（Windows 游戏栏 / macOS 屏幕录制）
录 15~30 秒，循环播放就够了

PPT 里设置：

“播放” → 勾选“循环播放，直到停止”
“开始” → 自动

方法 B：用 FFmpeg 把录屏压小一点（不然 PPT 巨卡）

你录出来的视频可能 200MB，PPT 打开像拖着沙袋走。

用这条命令压缩：

ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 23 -pix_fmt yuv420p -movflags +faststart output.mp4

参数怎么理解你不用管。

你只要记住：

crf 越大，体积越小，画质越差（20~28 之间试）
yuv420p 能避免某些电脑 PPT 播放黑屏

避坑清单（踩过的人都懂）

背景太亮：你以为是高级，观众看到的是“字看不清”。把饱和度降一点。
运动太快：PPT 场景下，快动会让人烦躁，像在催你快讲完。
分辨率太高：4K 录屏塞进 PPT，风扇立刻起飞。1080p 足够了。
透明叠加：PPT 里叠字时，视频对比度不够就会糊。加一层半透明黑色遮罩最省心。
循环有断点：如果你对“无缝循环”敏感，让 AI 做“周期函数”，或直接录更长一点。

我给你的推荐组合（照抄就不翻车）

做商务汇报 / 述职：用「方案一」渐变 + 噪声，速度放慢。
做产品发布 / 科技风：用「方案二」粒子，线别太多。
做创意展示 / 视觉系：让 AI 出「方案三」shader，然后录成 MP4。

你想让我按你的主题色（比如公司品牌蓝、Keynote 风格、赛博风）定制一套提示词也行。把你的场景说清楚：

用在网页还是 PPT？
背景偏冷还是偏暖？
想要“安静”还是“有存在感”？

我给你一段更贴脸的 prompt，直接拿去生成。