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

标签：opacity 动画星球大战浏览器样式魔法 transform byline CSS

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;
    }
}

6. 总结

通过以上步骤，我们成功地创建了一个具有《星球大战》风格的CSS动画。这个动画包括“Star”和“Wars”标志的淡入效果，以及标题“The Force Awakens”中每个字母的逐个淡入效果。这些效果不仅增加了页面的视觉吸引力，还为用户带来了沉浸式的体验。

7. 进一步优化

虽然当前的动画效果已经非常不错，但我们可以进一步优化和扩展：

响应式设计：确保动画在不同设备上都能良好显示，特别是在移动设备上。
交互效果：添加鼠标悬停或点击事件，使动画更加互动。
性能优化：使用硬件加速（如will-change属性）来提高动画性能。
音效：如果条件允许，可以添加背景音乐或音效，增强整体氛围。

通过这些优化，我们可以使《星球大战》风格的CSS动画更加完美，为用户提供更好的视觉和交互体验。

标签：opacity,动画,星球大战,浏览器,样式,魔法,transform,byline,CSS
From： https://blog.csdn.net/Cwayhome/article/details/143827368