🌌 致敬经典：用纯 CSS3 导演一场“星球大战”开场秀
“前端是代码界的导演。”
我们不需要摄像机，只需要 HTML 构建骨架，CSS 渲染光影。今天，我们就用几行 CSS3 代码，复刻经典的《星球大战》开场 3D 特效。
🎬 剧本规划（HTML 结构）
为了还原电影海报的经典站位，我们将结构分为三层：顶部的 "STAR"，底部的 "WARS"，以及中间那一排神秘的副标题。
codeHtml
<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
.starwars {
width: 34em;
height: 17em;
position: absolute;
top: 50%;
left: 50%;
/* 自身宽高的一半向回移动，实现精准居中 */
transform: translate(-50%, -50%);
}
2. 开启上帝视角（3D 景深）
这是本案例的灵魂所在。普通的平面动画无法表现星战字幕“飞向深空”的震撼。我们需要在父容器上开启 3D 空间：
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
@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
.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
<!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 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);
}
}
登录
