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

网页背景特效有时比静态图片更能吸引眼球。要实现类似短片的播放效果，主要有三种路径：原生视频标签、CSS 动画以及 WebGL 库。下面结合 Vue 组件结构，聊聊具体怎么落地。

原生视频标签：最直接的方式

利用 HTML5 的 <video> 标签是最简单的方案。只要处理好样式覆盖和属性配置，就能让视频铺满屏幕并循环播放。

<template>
  <div class="background-container">
    <video autoplay loop muted playsinline>
      <source src="path/to/your/video.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video>
    <div class="content">
      <h1>欢迎来到我的网站</h1>
      <p>这是一个背景特效示例。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
.background-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}
</style>

这里有个关键点：现代浏览器通常禁止带声音的视频自动播放，所以务必加上 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 则负责视觉上限。根据业务场景选择合适的技术栈，既能保证体验，又能控制成本。