用 CSS3 打造《星球大战》片头动画 —— 当前端成为导演本文带你用 HTML5 与 CSS3 打造《星球大战》片头动

用 CSS3 打造《星球大战》片头动画 —— 当前端成为导演

一、前端，不只是“让页面能用”

电影导演掌控镜头、节奏和情绪；
前端工程师同样在安排视觉、动线与体验。

优秀的前端，更像一名导演：
用 HTML 搭舞台，用 CSS 控镜头，用 JavaScript 定节奏。

今天，我们用 HTML5 + CSS3 动画，复刻影史最经典的
《星球大战（Star Wars）》片头动画。

这不仅是一段代码练习，而是一场关于“前端叙事”的视觉实验。

二、HTML：搭建舞台

HTML 决定了页面的角色与层次，是一切动画的基础。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Star Wars Animation</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div class="starwars">
    <img src="./star.svg" alt="star" class="star" />
    <img src="./wars.svg" alt="wars" class="wars" />
    <h2 class="byline" id="byline">
      <span>T</span><span>h</span><span>e</span>
      <span>F</span><span>o</span><span>r</span><span>c</span><span>e</span>
      <span>A</span><span>w</span><span>a</span><span>k</span><span>e</span><span>n</span><span>s</span>
    </h2>
  </div>
</body>
</html>

结构要点：

.starwars 是视觉容器
img.star / img.wars 构成上下分层的主标题
h2.byline 为副标题
每个字母用 span 包裹，实现逐字动画

逐字动画是经典技巧，通过拆字让节奏更可控。

三、CSS3：制作镜头与节奏

CSS 的意义不仅是美化，而是“负责镜头语言”。
本例使用 3D 透视 + 关键帧动画 还原电影般的空间感。

1. Reset：清空舞台

确保不同浏览器表现一致，让动画更稳定。

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000 url(./bg.jpg);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

Reset 的意义是：动画从一个“干净的世界”开始。

2. 构建 3D 场景

.starwars {
  perspective: 800px;
  transform-style: preserve-3d;
  width: 34em;
  height: 17em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

perspective 就是镜头，越小越夸张；
translateZ 让元素在空间中前后移动。

3. 布局与样式细节

.star, .wars, .byline {
  position: absolute;
}

.star { top: -0.75em; }
.wars { bottom: -0.5em; }

.byline {
  top: 45%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #fff;
  font-size: 1.5em;
}

拉长字间距，让画面更具未来科技感。

4. 动画：空间与时间的结合

标题远近推进

@keyframes star {
  0%   { opacity: 0; transform: scale(1.5) translateY(-0.75em); }
  20%  { opacity: 1; }
  89%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateZ(-1000em); }
}

这一段模拟了“从近景淡出到远景”的电影镜头。

逐字旋转登场

.byline span {
  display: inline-block;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0%, 10%   { opacity: 0; transform: rotateY(90deg); }
  30%       { opacity: 1; }
  70%, 86%  { transform: rotateY(0deg); opacity: 1; }
  95%, 100% { opacity: 0; }
}

字母逐个旋转，就像浮现在深空里。

副标题镜头靠近

@keyframes move-byline {
  0%   { transform: translateZ(5em); }
  100% { transform: translateZ(0); }
}

短短几行 CSS，就能构建完整的空间叙事。

5. 统一节奏

.star   { animation: star 10s ease-out infinite; }
.wars   { animation: wars 10s ease-out infinite; }
.byline { animation: move-byline 10s linear infinite; }

同一节奏让动画更“像一场表演”，而不是各自为政的动效拼贴。

四、让前端成为视觉叙事者

这段动画练习的价值不只是“做出效果”，
而是通过 CSS 思考时间、空间与节奏：

perspective 构建三维镜头
translateZ 营造景深
@keyframes 设定叙事节拍
语义结构 支撑良好的可维护性

优秀的前端动画不是堆 CSS，而是表达情绪。

代码也可以讲故事。

五、小结

通过本次练习，我们掌握了：

CSS3 3D 透视与空间坐标的实战用法
如何用关键帧设计节奏
HTML 结构与视觉逻辑的绑定方式
让前端具备“导演视角”的思考

前端是一门技术，更是一门视觉叙事艺术。

你写下的，不只是动画，而是一段故事。