全球前top50前端入门必做项目，纯css+html实现《星球大战》经典开场动画

AY1024
88 阅读12分钟

为什么你的布局总在“打架”？一份Reset就够了 | 从Reset到3D动画，掌握现代CSS核心

本文将从最基础的CSS Reset讲起，一步步带你实现《星球大战》3D片头效果，深入理解现代CSS的核心概念。

效果展示：

b6c7f11795aadd9aa78f3350229ac0c3.gif

第一部分：夯实地基 —— 深度解析现代CSS Reset

Reset的使命

在开始任何CSS项目前，我们都会遇到一个经典问题：为什么同一个网页在不同浏览器中看起来总有些细微差别？答案就藏在浏览器默认样式中。

每个浏览器都有自己的“用户代理样式表”，这些默认样式导致了跨浏览器显示差异。CSS Reset的使命就是消除这些差异，为我们提供一块干净的“画布”，让我们的样式在所有浏览器中从同一起跑线开始。

逐模块精讲

【Box-Sizing 革命】

在CSS世界里，元素的宽度和高度计算方式曾经是前端开发的“头号痛点”。让我们先看看两种不同的盒子模型：

/* 传统content-box模型 - 反直觉！ */
.content-box-example {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  /* 实际宽度 = 200px + 20px*2 + 5px*2 = 250px */
}

/* 现代border-box模型 - 符合直觉！ */
.border-box-example {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  /* 实际宽度 = 200px (包含padding和border) */
}

为什么border-box是现代布局的基石？

想象你在设计一个三栏布局，每栏宽度33.33%。在content-box模型下，一旦添加padding，布局就会立即崩溃！而border-box让宽度计算变得直观可控。

/* 推荐的重置方式 */
*, *::before, *::after {
  box-sizing: border-box;
}

为什么要包括伪元素？ 因为::before和::after伪元素同样遵循盒子模型规则，统一设置可以避免意外的布局问题。

【全局样式重置】

这是对Eric Meyer经典Reset的现代化改良，去除了过于激进的重置，保留了核心部分：

/* 移除默认边距，为精确布局打下基础 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* 统一字体族和行高，提升排版一致性 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* 改善字体渲染 */
}

/* 统一标题样式，后续按需定制 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

实践经验：我发现在实际项目中，保留某些元素的默认样式（如<em>的斜体）比完全重置更实用。

【语义化标签的块级化】

HTML5引入了丰富的语义化标签，但它们的默认display值需要统一处理：

/* 确保所有语义化块级元素正确显示 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* 现代浏览器中这些已经是block，但为了兼容性建议保留 */
【列表与表格的"净化"】
/* 移除列表默认样式，便于自定义导航等组件 */
ul, ol {
  list-style: none;
}

/* 表格边框合并，消除双边框问题 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

应用场景：list-style: none不仅用于导航菜单，在自定义列表组件中也必不可少。border-collapse: collapse让表格边框看起来更整洁。

【媒体元素的现代处理】

图片和视频是响应式设计中的关键元素：

img, picture, video, canvas, svg {
  display: block;           /* 消除图片底部的神秘间隙 */
  max-width: 100%;          /* 防止媒体元素溢出容器 */
  height: auto;             /* 保持宽高比 */
}

重要提示：那个神秘的图片底部间隙其实是行内元素的基线对齐导致的，display: block完美解决了这个问题。

【表单控件的"驯服"】

表单元素是浏览器默认样式最"顽固"的区域：

input, button, textarea, select {
  font: inherit;            /* 继承文档字体 */
  color: inherit;           /* 继承文本颜色 */
  background: transparent;  /* 移除默认背景 */
  border: 1px solid;        /* 统一边框，颜色可继承 */
  border-radius: 0;         /* 移除iOS圆角 */
  outline: none;            /* 移除焦点轮廓（需要提供替代方案） */
}

/* 为焦点状态提供可访问性替代方案 */
input:focus, button:focus, textarea:focus, select:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
【链接的样式继承】
a {
  color: inherit;           /* 继承父元素颜色 */
  text-decoration: none;    /* 移除下划线 */
}

/* 提供hover状态反馈 */
a:hover {
  text-decoration: underline;
}
【可选】"清除浮动"的今生前世

虽然现代布局中浮动已较少使用，但了解其历史仍有价值：

/* 经典clearfix方案 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

现代替代：Flexbox和Grid布局已经基本取代了浮动的布局作用，但在文字环绕图片等场景中，浮动仍有其价值。

完整现代CSS Reset代码

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

第二部分：创造奇迹 —— 构建《星球大战》3D动画

现在，让我们运用这些基础知识，创造一个令人惊叹的纯CSS《星球大战》3D片头效果！

舞台搭建

首先创建3D场景的舞台：

.starwars {
  /* 创建3D视角，值越小透视效果越强 */
  perspective: 800px;
  
  /* 确保子元素保持3D变换 */
  transform-style: preserve-3d;
  
  /* 全屏显示 */
  height: 100vh;
  overflow: hidden;
  
  /* 星空背景 */
  background: 
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><rect width="400" height="400" fill="black"/><circle cx="' + Math.random() * 400 + '" cy="' + Math.random() * 400 + '" r="1" fill="white"/></svg>') repeat;
}

perspective属性定义了3D元素的透视视角，相当于摄像机的焦距。值越小，透视效果越夸张。

核心布局技巧

实现经典的绝对定位居中：

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* 启用3D变换 */
  transform-style: preserve-3d;
}

这个技巧的妙处在于：

  • top: 50%; left: 50%; 将元素左上角移动到容器中心
  • transform: translate(-50%, -50%); 将元素自身向左上方移动自身宽高的一半

单位的选择艺术

在这个项目中，我们主要使用em单位：

.star, .wars, .byline {
  font-size: 4em; /* 相对于父元素的字体大小 */
}

/* 使用em实现相对缩放 */
@media (max-width: 768px) {
  .container {
    font-size: 0.8em; /* 所有使用em的子元素都会按比例缩放 */
  }
}

为什么选择em？

  • 相对于rem的全局性，em具有局部相对性
  • 便于实现组件的整体缩放效果
  • 在动画中能够创建更自然的相对运动

动画的灵魂 —— Keyframes

主标题动画分解
@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateZ(-500px);
    /* 起始状态：放大、远处、透明 */
  }
  20% {
    opacity: 1;
    /* 快速显现 */
  }
  90% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    /* 正常大小，到达观看位置 */
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translateZ(200px);
    /* 缩小、飞向远方、消失 */
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateZ(-500px);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translateZ(300px);
    /* 比STAR飞得更远一些，创造层次感 */
  }
}

动画逻辑解析：

  1. 由远及近：从translateZ(-500px)到translateZ(0)
  2. 缩放变化：从scale(1.5)到scale(1)再到scale(0.2)
  3. 淡入淡出：透明度从0→1→0的变化
副标题的3D旋转动画

这是整个效果最精巧的部分：

.byline {
  transform-origin: 50% 100%;
  /* 以底部为中心进行旋转 */
}

@keyframes spin {
  0% {
    opacity: 0;
    transform: rotateX(80deg);
    /* 起始状态：几乎垂直 */
  }
  20% {
    opacity: 1;
    /* 快速显现 */
  }
  80% {
    opacity: 1;
    transform: rotateX(0deg);
    /* 完全展平，面向观众 */
  }
  100% {
    opacity: 0;
    transform: rotateX(-80deg);
    /* 向后翻转消失 */
  }
}

@keyframes move {
  0% {
    transform: translateZ(400px);
    /* 起始位置：在观众后方 */
  }
  100% {
    transform: translateZ(-800px);
    /* 结束位置：飞向远方 */
  }
}

逐字显现效果：

.byline span {
  display: inline-block;
  animation: spin-letters 2s ease-in-out infinite;
}

.byline span:nth-child(1) { animation-delay: 0.1s; }
.byline span:nth-child(2) { animation-delay: 0.2s; }
.byline span:nth-child(3) { animation-delay: 0.3s; }
/* ... 为每个字母设置不同的延迟 */

动画的组装与触发

.star {
  animation: star 10s ease-out infinite;
}

.wars {
  animation: wars 10s ease-out infinite;
}

.byline {
  animation: 
    move 15s linear infinite,
    spin 15s linear infinite;
  /* 组合动画：移动 + 旋转 */
}

animation属性详解：

  • name：引用的keyframes名称
  • duration：动画持续时间
  • timing-function：缓动函数（ease-out先快后慢）
  • iteration-count：重复次数（infinite无限循环）

第三部分：完整代码实现

<!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>

/*
  标准 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 {
  /* 相对单位，相对于自身的字体大小 
    默认字体大小是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;
}
 body{
    height: 100vh;
    background: url('./xk.png');
 }
 .starwars{
    /* em 相对单位，相对于自身的字体大小，默认是16px ，rem 相对于根元素的字体大小*/
     width: 32em;
    height: 17em;
    position: absolute;
    top: 50%;
    left: 50%; 
    /* css背景颜色调试法*/
     /* background-color: wheat;  */
    transform: translate(-50%,-50%); 
    /* 支持3d声明 */
     perspective: 800px; 
    /* 保持3d变换 */
    transform-style:preserve-3d;
} 
.wars,.byline{
    position: absolute;
}
.star{
    top: -0.75em;
    /* 动画属性 
    star animation-name 动作脚本
    10s animation-duration 动作时间
    ease-out animation-timing-function
    ease-out infinite 重复动画 */
    
    animation: star 10s ease-out infinite
} 
 .wars{
    bottom: -0.5em;
    animation: wars 10s ease-out infinite
} 
.byline{
    color: rgb(229, 198, 151);
    left: -2em;
    right: -2em;
    top: 45%;
    /* background-color: aqua; */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 1.5em;
}
 /* 设计动作
 设计动画的关键帧
 opacity: 0;设置不可见
 transform: scale(2);放大倍数
 translateY(-0.75em)像上
 */
 @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) translatex(-0.75em)
    }
    20%{
        opacity: 1;
    }
    90%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: translateZ(-1000em);
    }
 }
 .byline{
     display: inline-block; 
    animation: move 10s linear infinite;
 }
 .byline span{
    display: inline-block;
    animation: spin 10s linear infinite;
 }
 @keyframes move {
    0%{
        transform: rotateY(90dge);
    }
    100%{
        transform: rotateY(0)
    }
 }
 @keyframes spin {
    0%,10%{
        opacity: 0;
        transform: rotateY(90deg)
    }
    30%{
        opacity: 1;
    }
    70%,80%{
        transform: rotateY(0);
        opacity: 1;
    }
    90%,100%{
        opacity: 0;
    }
 }

总结与升华

技术回顾

通过本文，我们深入探讨了两个核心内容：

  1. CSS Reset：为项目提供统一的样式起点，消除浏览器差异
  2. 3D动画：运用现代CSS特性创造沉浸式视觉体验

价值提升

这个项目不仅仅是实现一个炫酷效果，更重要的是：

  • 深入理解了CSS盒子模型和box-sizing的重要性
  • 掌握了3D变换的核心概念：perspective、transform-style、translateZ
  • 学会了关键帧动画的分解与组合技巧
  • 理解了相对单位在响应式动画中的应用价值

这些知识完全可以迁移到日常的UI开发中，比如创建卡片翻转效果、3D导航菜单、视差滚动等。

互动与思考

动手实验：

  • 尝试修改perspective的值（比如改为200px或2000px），观察视角变化
  • 调整关键帧中的translateZ值，改变元素的飞行距离
  • 修改动画时长和缓动函数，创造不同的节奏感

讨论话题： 你在工作中还用过哪些让你印象深刻的CSS技巧？是如何解决实际业务问题的？欢迎在评论区分享你的经验！

鼓励行动

如果这篇"Reset+实战"的组合拳对你有帮助，请点赞、收藏、关注！你的支持是我持续创作高质量技术内容的最大动力。

下一篇我们将探索CSS Grid的高级布局技巧和实战应用，敬请期待！

标签

#CSS #前端 #Web开发 #动画 #CSSReset #星球大战 #编程 #3D动画 #前端工程化

关于作者：前端工程师，热爱探索CSS的边界。在日常工作中积累了大量实战经验，希望通过分享帮助更多人掌握现代前端开发技巧。

avatar
文章
阅读
粉丝