前端即导演：用纯 CSS3 原力复刻《星球大战》经典开场

🌌 致敬经典：用纯 CSS3 导演一场"星球大战"开场秀

"前端是代码界的导演。"

我们不需要摄像机，只需要 HTML 构建骨架，CSS 渲染光影。今天，我们就用几行 CSS3 代码，复刻经典的《星球大战》开场 3D 特效。

🎬 剧本规划（HTML 结构）

为了还原电影海报的经典站位，我们将结构分为三层：顶部的 "STAR"，底部的 "WARS"，以及中间那一排神秘的副标题。

codeHtml

javascript 复制代码

<div class="starwars">
    <img src="./star.svg" alt="star" class="star">
    <img src="./wars.svg" alt="wars" class="wars">
    <h2 class="byline">
        <!-- 每个字母单独包裹，为了后续的翻转动画 -->
        <span>T</span><span>h</span><span>e</span>...
    </h2>
</div>

这里有一个细节：副标题 h2 中的每个字母都用 span 包裹，这是为了让每个字母能独立进行 3D 旋转表演。

🎥 搭建舞台（核心 CSS）

1. 完美的绝对居中

在全屏黑背景下，我们需要让 logo 稳稳地悬浮在宇宙中心。这里使用了经典的"绝对定位 + Transform"大法：

CSS

css 复制代码

.starwars {
    width: 34em;
    height: 17em;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 自身宽高的一半向回移动，实现精准居中 */
    transform: translate(-50%, -50%);
}

2. 开启上帝视角（3D 景深）

这是本案例的灵魂所在。普通的平面动画无法表现星战字幕"飞向深空"的震撼。我们需要在父容器上开启 3D 空间：

CSS

css 复制代码

.starwars {
    /* 视距：模拟人眼距离屏幕 800px 的位置 */
    perspective: 800px;
    /* 保持子元素的 3D 空间关系 */
    transform-style: preserve-3d;
}

perspective: 决定了"近大远小"的程度，数值越小，透视感越强烈。
transform-style: preserve-3d: 确保子元素在 3D 空间中变换，而不是被压扁在 2D 平面里。

🎞️ 动作设计（关键帧动画）

Step 1: 巨物消逝（Logo 动画）

STAR 和 WARS 两张图片需要经历：透明 -> 出现 -> 缩小复位 -> 飞向深渊 的过程。

我们利用 translateZ 来控制 Z 轴距离，负值越大，离我们越远。

CSS

css 复制代码

@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); /* 瞬间飞向宇宙深处！ */
  }
}

Step 2: 文字起舞（副标题动画）

中间的 The Force Awake 需要有一种"翻转浮现"的神秘感。

注意：span 默认是行内元素，无法应用 Transform，所以必须设置为 display: inline-block。

CSS

css 复制代码

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

@keyframes spin-letters {
  0%, 100% {
    opacity: 0;
    transform: rotateY(90deg); /* 侧身 90 度，相当于隐身 */
  }
  30% { opacity: 1; }
  70% {
    transform: rotateY(0); /* 正对观众 */
    opacity: 1;
  }
}

配合父容器 .byline 的 Z 轴推进动画，文字不仅在自转，还在向镜头推进，层次感瞬间拉满。

🏁 杀青

通过 perspective 构建空间，利用 translateZ 制造纵深，再配合 rotateY 增加动感。不需要复杂的 JS 库，几十行 CSS 就能致敬经典。

前端开发的乐趣，往往就在这些像素的腾挪转移之间。愿原力与你的代码同在！May the code be with you.

源代码

HTML

xml 复制代码

<!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.png" alt="star" class="star">
        <img src="./wars.png" 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>
    </div>
</body>
</html>

CSS

css 复制代码

/*
  标准 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;
}

/* 业务代码 */
body {
  height: 100vh;
  background:#000 url(./bg.jpg);
}
.starwars {
    /* 声明 支持3D */
  perspective: 800px;
  /* 保持3D 变换 */
  transform-style: preserve-3d;
  /* 相对单位，相对于自身的字体大小 
    默认字体大小是16
  */
  width: 34em;
  height: 17em;
  /* 绝对定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* css 调试手法， 背景颜色调试大法 */
  /* background-color: red; */
}
img {
    /* 高度等比例缩放 */
  width: 100%;
}
.star, .wars, .byline {
  position: absolute;
}
.star {
  top: -0.75em;
}
.wars {
  bottom: -0.5em;
}
.byline {
  left: -2em;
  right: -2em;
  top: 45%;
  /* background: green; */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 1.6em;
  color: white;
}
.star{
    /* 动画属性 
    star 动作脚本
    10s animation-duration
    ease-out animation-timing-function
    */
    animation: star 10s ease-out infinite;
}
.wars{
    animation: wars 10s ease-out infinite;
}
.byline{
    animation: move-byline 10s linear infinite;
}
.byline span{
    display: inline-block;
    animation: spin-letters 10s linear infinite;
}

/* 设计动作 动画的关键帧 */
@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);
    }
    
}
@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 spin-letters {
   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);
    }
}