穿越银河的CSS魔法：重现《星球大战》经典开场-CSDN博客

本文链接：https://blog.csdn.net/Cwayhome/article/details/143827368

1. 引言

《星球大战》（Star Wars）是一部经典的科幻电影系列，其独特的开场动画和视觉效果深受观众喜爱。本文将介绍如何使用HTML和CSS来创建一个具有《星球大战》风格的动画效果，包括“Star”和“Wars”标志的淡入效果，以及标题“The Force Awakens”中每个字母的逐个淡入效果。具体效果如下：

在这里插入图片描述

2. HTML结构

首先，我们创建一个基本的HTML5文档结构，并添加一些必要的元数据信息以确保跨浏览器兼容性和移动设备友好性。这段HTML代码创建了一个简单的页面结构，用于展示“星球大战”风格的动画效果。主要包含一个容器div，其中包含两张SVG图像（“Star”和“Wars”标志）和一个由多个span元素组成的标题。通过引入外部CSS文件common.css，可以对这些元素进行样式和动画的定义，以实现预期的视觉效果。

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

3. CSS重置

为了确保不同浏览器之间的样式一致性，我们使用了Eric Meyer的CSS重置样式表。这将清除浏览器的默认样式，使我们的页面在所有浏览器上都能表现出一致的效果。

为什么需要CSS重置？

消除浏览器默认样式差异：不同浏览器对某些HTML元素的默认样式处理方式不同。例如，某些浏览器可能给<h1>标签设置了不同的行高和边距，而另一些浏览器则没有。通过重置，可以确保这些元素在所有浏览器中具有一致的默认样式。
提高跨浏览器兼容性：通过统一默认样式，可以减少因浏览器差异导致的布局问题，提高页面的跨浏览器兼容性。
简化样式管理：重置后，开发者可以更专注于自定义样式，而不需要频繁处理浏览器的默认样式。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*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, 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 display-role reset for older browsers */
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;
}

4. 业务样式

接下来我们编写具体的业务样式，包括背景设置、居中布局、3D效果和动画。主要包括以下内容：

基础布局：设置html和body的高度为视口高度的100%，并设置背景颜色和图像。
主容器样式：设置3D透视效果，使子元素的3D变换更自然，并使用Flexbox布局使子元素居中对齐。
图像样式：设置图像的宽度为100%，使其填充父容器。
子元素定位：将“Star”、“Wars”标志和标题设置为绝对定位，使其相对于主容器进行精确定位。
标题样式：设置标题的颜色、字体大小、对齐方式等，使其符合《星球大战》的风格。

/* 业务样式 */
html, body {
    height: 100vh;
}
body {
    background: #000 url('./images/bg.jpg');
}
.starwars {
    perspective: 800px;
    transform-style: preserve-3d;
    height: 17em;
    width: 34em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
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: 40%;
}

5. 动画效果

5.1 “Star”和“Wars”的淡入效果

我们通过定义两个动画（star 和 wars）及其关键帧（@keyframes），实现了“Star”和“Wars”标志的淡入、放大、恢复原状、再淡出的效果。动画的总时长为10秒，并且无限循环。通过这种方式，可以创建出具有《星球大战》风格的动态效果。就像是茫茫星河里两艘从飞船相遇到分别一样

.star {
    animation: star 10s ease-out infinite;
}
.wars {
    animation: wars 10s ease-out infinite;
}
@keyframes star {
    0% {
        opacity: 0;
        transform: scale(1.5) translateY(-0.75em);
    }
    20% {
        opacity: 1;
    }
    88% {
        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);
    }
}

5.2 标题“The Force Awakens”中每个字母的逐个淡入旋转效果

我们为标题“The Force Awakens”中的每个字母设置了逐个淡入效果。每个字母将从旋转90度的状态逐渐变为正常状态，并且逐个出现。通过定义两个动画（move-byline 和 spin-letters）及其关键帧（@keyframes），实现标题（.byline）和标题中每个字母（.byline span）的动态效果。

.byline {
    animation: move-byline 10s linear infinite;
}
.byline span {
    animation: spin-letters 10s linear infinite;
    display: inline-block;
}
@keyframes move-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;
    }
}