从 0 到 1 实现星球大战片头：CSS 3D 变换与关键帧动画实战

有意义
147 阅读5分钟

项目简介

星球大战片头复刻项目是前端社区中极具代表性的创意练习案例。开发者通过 HTML5 结构与 CSS3 动画特性，完美还原了《星球大战》系列电影中标志性的 “星空滚动文字” 片头效果。因其结合了高辨识度的全球 IP 与 CSS 3D 变换、动画等核心技术，成为前端开发者展示动画能力的经典范本。

项目完整代码及素材可在我的 Gitee 仓库查看：学习仓库

一、HTML 结构设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 & CSS3 星球大战片头复刻</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>
        </h2>
    </div>
</body>
</html>

开发注意事项：

  1. CSS 样式表需在 <head> 中引入，确保页面渲染时优先加载样式，避免 “无样式闪烁”。
  2. 若项目包含 JavaScript，建议放在 <body> 底部，防止 JS 加载阻塞 HTML 解析与渲染。

二、CSS 实现详解

1. CSS Reset：统一跨浏览器样式基础

CSS Reset 是前端样式一致性的基石，通过覆盖浏览器默认样式，消除不同浏览器的渲染差异，为后续开发提供统一基准。

/*
  标准 CSS Reset
  基于 Eric Meyer 的 Reset 并结合现代浏览器特性
*/

/* 全局盒模型统一为 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 重置所有元素的内外边距、边框与字体样式 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 语义化元素设为块级 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 清除列表默认样式 */
ol, ul {
  list-style: none;
}

/* 统一表格样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 重置替换元素（图片、视频等） */
img, video, canvas, audio, svg {
  display: block;
  max-width: 100%;
}

/* 统一表单元素样式 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: transparent;
  vertical-align: middle;
}

/* 重置链接链接重置 */
a {
  text-decoration: none;
  color: inherit;
}

/* 防止移动端字体缩放异常 */
body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}

/* 清除浮动工具类（可选） */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. 核心样式与动画实现

（1）页面基础布局
body {
  height: 100vh;
  background: url(./bg.png);
}
  • vh 是相对单位（viewport height），100vh 表示元素高度等于浏览器视口高度，实现全屏背景。
（2）3D 容器搭建

.starwars {
  width: 34em;
  height: 17em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 800px; /* 定义透视距离，增强 3D 感 */
  transform-style: preserve-3d; /* 子元素保持 3D 空间关系 */
}
  • em：相对长度单位，基于元素自身字体大小（默认 1em = 16px），适合响应式缩放。
  • transform: translate(-50%, -50%)：配合绝对定位实现元素在父容器中水平垂直居中（百分比基于元素自身宽高）。
  • perspective：模拟人眼与元素的距离，值越小，3D 透视感越强。
  • transform-style: preserve-3d：确保子元素在 3D 空间中布局，而非被扁平化到父元素平面。
（3）元素样式与动画绑定
img {
  width: 100%; /* 图片自适应容器宽度 */
}

.star, .wars, .byline {
  position: absolute; /* 子元素绝对定位，基于 .starwars 容器 */
}

/* "STAR" 文字动画 */
.star {
  top: -0.75em;
  animation: star 10s ease-out infinite;
}

/* "WARS" 文字动画 */
.wars {
  bottom: -0.5em;
  animation: wars 10s ease-out infinite;
}

/* 副标题样式 */
.byline {
  left: -2em;
  right: -2em;
  top: 45%;
  text-align: center;
  text-transform: uppercase; /* 文字转为大写 */
  letter-spacing: 0.4em; /* 增加字母间距 */
  font-size: 1.6em;
  color: #fff;
  animation: move-byline 10s linear infinite;
}

/* 单个字母动画容器 */
.byline span {
  display: inline-block; /* 兼具行内排列与块级样式特性 */
  animation: spin-letter 10s linear infinite;
}
（4）关键帧动画定义

四个动画协同工作，构建沉浸式 3D 效果：

/* "STAR" 文字：从远处出现并消失 */
@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); /* Z 轴远移，模拟消失 */
  }
}

/* "WARS" 文字：与 STAR 对称的动画 */
@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% { opacity: 1; }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

/* 副标题：从远方滚动至眼前 */
@keyframes move-byline {
  0% { transform: translateZ(25em); } /* 远处（小而模糊） */
  100% { transform: translateZ(0); } /* 近处（清晰） */
}

/* 单个字母：3D 翻转出现 */
@keyframes spin-letter {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg) translateZ(20px); /* 背面朝向观察者 */
  }
  30% {
    opacity: 1;
    transform: rotateY(0) translateZ(0); /* 翻转至正面 */
  }
  70%, 86% {
    transform: rotateY(0) translateZ(0);
    opacity: 1;
  }
  95% { opacity: 0; }
}

三、整体效果

通过 10 秒周期的无限循环动画，四个关键帧协同作用：

  • “STAR” 与 “WARS” 分别从上下方向出现，短暂清晰显示后向远方消失；
  • 副标题 “THE FORCE AWAKENS” 从远处沿 Z 轴滚动至眼前，同时每个字母以 3D 翻转方式逐个显现；
  • 结合星空背景与透视效果，完美复刻《星球大战》片头的沉浸式科幻氛围。

该项目不仅是对经典 IP 的致敬，更是 CSS 3D 变换与动画技术的集中展示，适合前端开发者学习进阶动画技巧。

avatar
文章
阅读
粉丝