《星球大战》经典开场动画的复现：HTML与CSS的魔法

不夜宵吃_
VIP.1 初学乍练
285 阅读9分钟

前言

《星球大战》（Star Wars）是一部经典的科幻电影系列，其独特的视觉效果和深入人心的故事线吸引了无数影迷。今天，我们将用HTML和CSS来重现《星球大战》的经典开场动画，带你走进这个充满想象力的世界。

一、准备工作

1. 编辑器

选择一个合适的代码编辑器来编写HTML和CSS代码。以下是一些推荐的编辑器：

  • Visual Studio Code (VSCode) ：功能强大，支持多种插件，有很好的代码高亮和自动完成功能。
  • Sublime Text：轻量级且高效，支持多种编程语言。
  • Atom：由GitHub开发，开源且可扩展性强。
  • Notepad++ ：简单易用，适合初学者。

安装步骤（以VSCode为例）：

# 访问VSCode官网下载安装包
https://code.visualstudio.com/
# 安装完成后打开VSCode

2. 浏览器

选择一个现代浏览器来预览和测试你的网页。以下是一些推荐的浏览器：

  • Google Chrome：功能强大，开发者工具齐全。
  • Mozilla Firefox：开源浏览器，开发者工具也非常强大。
  • Microsoft Edge：基于Chromium内核，性能优秀。
  • Safari：如果你使用的是Mac，Safari也是一个不错的选择。

安装步骤（以Google Chrome为例）：

# 访问Chrome官网下载安装包
https://www.google.com/chrome/
# 安装完成后打开Chrome

3. 图片编辑工具

准备和编辑图片资源，可以使用以下工具：

  • Adobe Photoshop：专业的图像处理软件，功能强大。
  • GIMP：免费且开源的图像编辑软件，功能接近Photoshop。
  • Inkscape：免费且开源的矢量图形编辑软件，适合编辑SVG文件。
  • Canva：在线设计工具，适合快速制作简单的图像和图标。

安装步骤（以GIMP为例）：

# 访问GIMP官网下载安装包
https://www.gimp.org/
# 安装完成后打开GIMP

4. 创建项目文件夹

在你的计算机上创建一个项目文件夹，用于存放所有相关的文件和资源。例如，你可以创建一个名为 starwars 的文件夹。

5. 准备图片资源

在项目文件夹中创建一个 images 文件夹，用于存放图片资源。

你需要准备以下三个文件：

  1. star.svg：这是一个SVG文件，用于显示“STAR”。
  2. wars.svg：这是一个SVG文件，用于显示“WARS”。
  3. bg.jpg：这是一个背景图片文件

二、 HTML 结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星球大战</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    <div class="starwars">
        <img src="./images/star.svg" class="star" alt="STAR">
        <img src="./images/wars.svg" class="wars" alt="WARS">
        <h2 class="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>
            <span>n</span>
            <span>s</span>
        </h2>
    </div>
</body>

</html>

代码解释

  1. 文档类型声明：

    <!DOCTYPE html>

    这行代码声明了文档类型为HTML5，确保浏览器以最新的标准解析页面。

  2. HTML 标签：

    <html lang="en">

    指定文档的语言为英语。

  3. 头部信息：

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星球大战</title>
    <link rel="stylesheet" href="./common.css">
</head>
    • <meta charset="UTF-8">：设置字符编码为UTF-8，确保文本正确显示。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，确保页面在移动设备上正确显示。
    • <title>星球大战</title>：设置页面的标题。
    • <link rel="stylesheet" href="./common.css">：链接外部CSS文件 common.css，用于样式设置。

  4. 主体内容：

    <body>
    <div class="starwars">
        <img src="./images/star.svg" class="star" alt="STAR">
        <img src="./images/wars.svg" class="wars" alt="WARS">
        <h2 class="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>
            <span>n</span>
            <span>s</span>
        </h2>
    </div>
</body>
    • <div class="starwars">：创建一个包含所有内容的容器。
    • <img src="./images/star.svg" class="star" alt="STAR">：显示“STAR”图像。
    • <img src="./images/wars.svg" class="wars" alt="WARS">：显示“WARS”图像。
    • <h2 class="byline">：包含多个<span>标签，每个<span>代表一个字母，用于实现逐字动画效果。

三、CSS 样式

/* CSS reset */
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, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 业务样式 */
html, body {
    height: 100vh;
}

body {
    background: #000 url('images/bg.jpg') no-repeat center center / cover;
}

.starwars {
    perspective: 800px;
    transform-style: preserve-3d;
    height: 17em;
    width: 34em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img {
    width: 100%;
}

.star, .wars, .byline {
    position: absolute;
}

.star {
    top: -0.75em;
}

.wars {
    bottom: -0.5em;
}

.byline {
    color: #fff;
    font-size: 2.25em;
    left: -2em;
    right: -2em;
    text-align: center;
    text-transform: uppercase;
    top: 42%;
}

/* 动画 */
.star {
    animation: star 10s ease-out infinite;
}

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

@keyframes star {
    0% {
        opacity: 0;
        transform: scale(1.5) translate(-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) translate(0.5em);
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: translateZ(-1000em);
    }
}

.byline {
    animation: movie-byline 10s linear infinite;
}

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

@keyframes movie-byline {
    0% {
        transform: translateZ(5em);
    }
    100% {
        transform: translateZ(0em);
    }
}

@keyframes spin-letters {
    0%, 10% {
        opacity: 0;
        transform: rotateY(90deg);
    }
    30% {
        opacity: 1;
    }
    70%, 86% {
        transform: rotateY(0);
        opacity: 1;
    }
    95%, 100% {
        opacity: 0;
    }
}

代码解释

  1. 通用重置样式：

    html,
body,
div,
span,
...
table {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

    这部分代码重置了所有元素的默认样式，确保在不同浏览器中的一致性。

  2. HTML5显示角色重置：

    article,
aside,
details,
...
section {
    display: block;
}

    这部分代码确保HTML5的新标签在旧浏览器中也能正确显示。

  3. 业务样式：

    html,
body {
    height: 100vh;
}

body {
    background: #000 url('./images/bg.jpg') no-repeat center center / cover;
}

.starwars {
    perspective: 800px;
    transform-style: preserve-3d;
    height: 17em;
    width: 34em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img {
    width: 100%;
}

.star,
.wars,
.byline {
    position: absolute;
}

.star {
    top: -0.75em;
}

.wars {
    bottom: -0.5em;
}

.byline {
    color: #fff;
    font-size: 2.25em;
    left: -2em;
    right: -2em;
    text-align: center;
    text-transform: uppercase;
    top: 42%;
}

    这部分代码设置了页面的布局和样式，包括背景图片、元素的定位和尺寸等。

  4. 动画：

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

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

@keyframes star {
    0% {
        opacity: 0;
        transform: scale(1.5) translate(-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) translate(0.5em);
    }

    20% {
        opacity: 1;
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: translateZ(-1000em);
    }
}

.byline {
    animation: movie-byline 10s linear infinite;
}

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

@keyframes movie-byline {
    0% {
        transform: translateZ(5em);
    }

    100% {
        transform: translateZ(0em);
    }
}

@keyframes spin-letters {
    0%,
    10% {
        opacity: 0;
        transform: rotateY(90deg);
    }

    30% {
        opacity: 1;
    }

    70%,
    86% {
        transform: rotateY(0);
        opacity: 1;
    }

    95%,
    100% {
        opacity: 0;
    }
}

    这部分代码定义了动画效果，包括关键帧和动画属性，实现了“STAR”、“WARS”和“THE FORCE AWAKENS”的动态效果。

四、进阶技巧

为了完善上述代码，我们可以从以下几个方面进行改进和优化：

  1. 响应式设计：确保页面在不同设备上都能良好显示。
  2. 性能优化：减少不必要的计算和渲染，提高页面加载速度。
  3. 可访问性：确保页面对所有用户（包括残障用户）都是可用的。
  4. 代码结构和可维护性：保持代码整洁，便于未来的维护和扩展。

1. 响应式设计

确保页面在不同设备上都能良好显示，可以通过媒体查询来调整样式。

/* 响应式设计 */
@media (max-width: 768px) {
    .starwars {
        width: 24em;
        height: 12em;
    }

    .byline {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .starwars {
        width: 18em;
        height: 9em;
    }

    .byline {
        font-size: 1.2em;
    }
}

2. 性能优化

  • 压缩图片：确保背景图片和SVG文件是经过压缩的，以减少加载时间。
  • 使用懒加载：对于大型图片，可以考虑使用懒加载技术。

3. 可访问性

  • Alt 属性：确保所有图片都有描述性的 alt 属性。
  • 语义化标签：使用语义化的HTML标签，如 <main>、<header>、<footer> 等。
  • ARIA 属性：使用 ARIA 属性增强可访问性。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星球大战</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    <main role="main">
        <div class="starwars" role="region" aria-label="星球大战开场动画">
            <img src="./images/star.svg" class="star" alt="STAR" aria-hidden="true">
            <img src="./images/wars.svg" class="wars" alt="WARS" aria-hidden="true">
            <h2 class="byline" aria-label="The Force Awakens"> 
                <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>
                <span>n</span>
                <span>s</span>
            </h2>
        </div>
    </main>
</body>

</html>

4. 代码结构和可维护性

  • 模块化：将CSS分成多个文件，按功能模块组织。
  • 注释：增加注释，帮助理解和维护代码。

五、项目总结

1. 项目概述

本项目旨在创建一个《星球大战》主题的网页，展示“STAR WARS”和“THE FORCE AWAKENS”字样，并使用CSS动画实现动态效果。项目包括HTML结构、CSS样式和动画效果。

2. HTML 结构
  • 文档类型声明：使用 <!DOCTYPE html> 声明文档类型为HTML5。
  • 语言声明：设置文档语言为英语 <html lang="en">。
  • 元数据：设置字符编码为UTF-8，确保文本正确显示 <meta charset="UTF-8">。设置视口，确保页面在移动设备上正确显示 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
  • 标题：设置页面标题为“星球大战” <title>星球大战</title>。
  • 链接样式表：链接外部CSS文件 common.css <link rel="stylesheet" href="./common.css">。
  • 主体内容：创建一个包含所有内容的容器 <div class="starwars">，其中包含两个SVG图像和一个带有逐字动画效果的标题 <h2 class="byline">。
3. CSS 样式
3.1 通用重置样式
  • Eric Meyer's Reset CSS：重置所有元素的默认样式，确保在不同浏览器中的一致性。
  • HTML5显示角色重置：确保HTML5的新标签在旧浏览器中也能正确显示。
3.2 业务样式
  • 全局样式：设置HTML和body的高度为100视口高度 height: 100vh，并设置背景图片 background: #000 url('./images/bg.jpg')。
  • 容器样式：设置 .starwars 容器的透视效果 perspective: 800px 和3D变换样式 transform-style: preserve-3d，并居中定位 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。
  • 图像样式：设置图像的宽度为100% width: 100%，并绝对定位 position: absolute。
  • 标题样式：设置 .byline 的颜色、字体大小、位置和文本对齐方式，以及逐字动画效果。
3.3 动画
  • 动画名称和关键帧：定义 star 和 wars 的动画，包括透明度和缩放效果。
  • 逐字动画：定义 movie-byline 和 spin-letters 的动画，实现逐字出现和旋转效果。
4. 响应式设计
  • 媒体查询：使用媒体查询调整不同屏幕尺寸下的样式，确保页面在不同设备上都能良好显示。
  • 调整布局和字体大小：根据屏幕尺寸调整 .starwars 容器的宽度和高度，以及 .byline 的字体大小。
5. 性能优化
  • 压缩图片：确保背景图片和SVG文件是经过压缩的，以减少加载时间。
  • 使用懒加载：对于大型图片，可以考虑使用懒加载技术。
6. 可访问性
  • Alt 属性：确保所有图片都有描述性的 alt 属性。
  • 语义化标签：使用语义化的HTML标签，如 <main>、<header>、<footer> 等。
  • ARIA 属性：使用 ARIA 属性增强可访问性，例如 aria-label 和 aria-hidden。
7. 代码结构和可维护性
  • 模块化：将CSS分成多个文件，按功能模块组织。
  • 注释：增加注释，帮助理解和维护代码。

总结

通过以上步骤，我们确保了页面在不同设备上的响应式设计、提高了性能、增强了可访问性，并且保持了代码的整洁和可维护性。这些改进不仅提升了用户体验，还为未来的维护和扩展奠定了坚实的基础。希望这些改进能帮助你更好地完成项目！如果有任何问题或需要进一步的帮助，请随时告诉我。

avatar
文章
阅读
粉丝