🌌 用 CSS3 打造《星球大战》经典片头滚动效果
前端是代码界的导演 —— 我们用 HTML 与 CSS 编排一场视觉电影
引言：当网页变成星际银幕
在《星球大战》系列电影中，最令人印象深刻的莫过于那经典的黄色斜体文字从屏幕底部缓缓升起、消失在星空深处的开场字幕。作为前端开发者，我们不需要特效团队或摄影机，仅凭 HTML + CSS3 就能复刻这一科幻史诗感十足的视觉效果。
本文将带你一步步使用纯 CSS3 技术实现"星球大战"式滚动字幕，并探讨其中的关键布局技巧与语义化结构设计。
效果展示（不会插入视频）
一、HTML 结构设计：构建语义化的"电影框架"
首先，我们需要一个符合语义的 HTML 结构来表达这段"电影开场"。
很明显图片上是一个星空的图片背景，然后是两张图片（star与wars)，中间是一排span，因为每个字母要能独立旋转所有要创建许多span，用一个div包住star，wars与中间span形成一个整体。当完成这些就得到这个：
<!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>
✅ 为什么这样设计？
| 元素 | 作用 | 语义说明 |
|---|---|---|
div | 容器 | 整个电影标题的外层容器 |
img | 标题 | 组成标题的一部分 |
span | 字幕内容区 | 组成标题另一部分 |
h2 | span的组合 | 包装span的所有字母 |
一、视觉核心：CSS3 实现"太空纵深感"与文字飞船动画
1. 背景营造：模拟宇宙星空
body{
height: 100vh;//让body覆盖全屏
background:#000 url(./bg.jpg);
}
二、居中难题：如何水平垂直居？
✅ 解法：结合 position 与 transform
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
🔍 原理解析：
position: absolute：脱离文档流，相对于最近的定位祖先元素定位。- 若父级没有
position: relative，则默认相对body定位。 top: 50%; left: 50%：将元素左上角移到视窗中心。transform: translate(-50%, -50%)：以自身左上角为参考对象把元素自身宽高的一半拉回来，实现真正的中心对齐。
⚠️ 注意：
transform是基于元素自身的尺寸计算偏移量，因此无论内容多大都能精准居中。
三、div内部位置调整
.starwars{
/* 相对单位，相对与自身的字体大小
默认字体大小是16
*/
width: 34em;
height: 17em;
/* 绝对定位 */
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/* css 调试手法，背景颜色调试大法 */
/* background-color: red; */
}
img{
width: 100%;//让star，wars的宽度与div一致
}
.star,.wars,.byline{
position:absolute;
}
.star{
top:-0.75em;//让star图片超出div顶部(0.75*16)px
}
.wars{
bottom:-0.5em;//超出底部
}
.byline{
left:-2em;
right:-2em;//span组的左右超出div
top: 44%;//距离div顶部44%个div
/* background-color: green; */
text-align: center;//让标题里的内容居中展示
text-transform: uppercase;//大写
letter-spacing: 0.25em;//字间距
font-size: 1.9em;//大小
color: white;
}
em是相对单位，相对与自身的字体大小，默认字体大小是16
四、动起来的字
完成上述代码就已经写出了静止的星球大战，但如何让它动起来就需要引用3d声明：
.starwars{
/* 支持3d 声明 */
perspective: 800px;//人眼离屏幕的距离改变可以达到3d的效果，随意设置即可
/* 支持3d 变换 */
transform-style: preserve-3d;//为div加入3d基因，就是多了个z轴
}
在div中加入这一段便可以开始3d动画的编译：
先演示一下star的动画代码
.star{
/* 动画属性
star animation-name 动画名称
10s animation-duration 动画持续时间
ease-out animation-timing-function 动画时间函数（在这里是由快到慢）
infinite 动画执行次数，这个是无限循环
*/
animation: star 10s ease-out infinite;
}
/* 设计动作 动画关键帧 */
@keyframes star{
/* 每个关键帧写他的属性 */
0%{
opacity: 0;//控制元素透明度，0就是不可见
transform: scale(1.5) translateY(-0.75em);
//scale是控制等比缩放开始是1.5倍大小；translateY是控制Y轴位置垂直移动-0.75m；translate代表垂直，Y是沿y轴
}
20%{
opacity: 1;//这时可见
}
89%{
opacity: 1;
transform: scale(1);//大小回到原来
}
100%{
opacity: 0;//不可见
transform: translateZ(-1000em);//向屏幕里无限深营造很快的感觉
}
这些百分数已前面声明的时间为参照，每关键帧之间会依照状态丝滑转换
}
wars差不多就不写了直接上byline(就是中间的小字旋转) byline由两部分组成h2是整行的整体，span是独立的旋转
.byline{
animation: move-byline 10s linear infinite;//linear线性说明动画匀速播放
}
.byline span{
display: inline-block;//display设置布局行为，inline-block让h2中的span可以独立设置各种属性
animation: spin-letter 10s linear infinite;
}
@keyframes move-byline{
0%{
transform: translateZ(5em);//整行内容初始向屏幕外移动（5*16）px
}
100%{
transform: translateZ(0);//在结束时回到本来的位置
}
}
@keyframes spin-letter{
0%,10%{
opacity: 0;//不可见
/* 跳钢管舞 */
transform: rotateY(90deg);//顺时针旋转90度，
}
30%{
opacity: 1;
}
70%,86%{
transform: rotateY(0);//绕y轴旋转0度就是正对屏幕，rotate是旋转，y是y轴
opacity: 1;
}
95%,100%{
opacity: 0;//再次不可见
}
}
做完这些动画就完成了
结语：前端即叙事艺术
通过这个小项目，我们不只是写了几行样式规则，而是用代码讲述了一个故事。前端工程师就像导演，掌控着节奏、光影与情绪。
🚀 May the Force be with you.
