网页背景视频与动态特效实现方案

这里有个关键点：现代浏览器通常禁止带声音的视频自动播放，所以务必加上 muted 属性。另外 playsinline 对移动端 iOS Safari 比较友好，防止全屏弹窗。布局上把视频设为绝对定位且层级最低，内容层放在上面即可。

CSS 动画：轻量级的动态效果

如果不想引入视频文件，或者担心流量消耗，CSS 渐变动画是个好选择。通过改变背景位置，可以模拟出流动的色彩效果。

.animated-background {
  width: 100%;
  height: 100vh;
  background: linear-gradient(45deg, #ff6a00, #ee0979, #ff6a00);
  background-size: 400% 400%;
  animation: gradientBackground 10s ease infinite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

@keyframes gradientBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

这种写法性能开销极小，主要靠 GPU 加速渲染。适合不需要特定画面内容，只需要氛围感的场景。

WebGL 库：高阶 3D 特效

当需求涉及到粒子、光影或者复杂的几何变换时，Three.js 这类 WebGL 库就派上用场了。它能提供真正的 3D 空间体验。

import * as THREE from 'three';

export default {
  mounted() {
    this.create3DBackground();
  },
  methods: {
    create3DBackground() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById('threejs-background').appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }

      animate();
    }
  }
};

这段代码初始化了一个基础场景，并在其中添加了一个旋转的立方体。实际项目中，你可以替换成模型加载、粒子系统或者后期处理效果。不过要注意，3D 渲染对性能有一定要求，低端设备上需做好降级处理。

小结

这三种方案各有侧重。<video> 标签适合展示真实画面，CSS 动画胜在轻量，Three.js 则负责视觉上限。根据业务场景选择合适的技术栈，既能保证体验，又能控制成本。