从零开始打造《星球大战》酷炫开场动画

PW
211 阅读6分钟

前言

在这篇文章中，我们将详细介绍如何使用HTML5和CSS3创建一个《星球大战》（Star Wars）主题的网页，并添加一些酷炫的动画效果。我们将从基础的HTML结构开始，逐步介绍CSS样式和动画的实现方法。 效果大致如下： 11月9日.gif

可以想象一下，在茫茫宇宙中有两艘飞船相遇，他们一同“时空跳跃”，飞向遥远的远方。

1. HTML5 版本声明头

首先，我们需要声明HTML5文档类型，并设置文档的基本结构。HTML5版本声明头如下：

html
<!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>
  <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>
      <span>s</span>
    </h2>
  </div>
</body>
</html>

2. CSS 重置

不同的浏览器对元素的默认样式处理方式不同，因此我们需要使用CSS重置来确保所有浏览器的一致性。在大型项目中，如果不进行 CSS 重置，随着时间的推移，不同浏览器的默认样式差异可能会导致网页样式出现混乱，难以维护。 你可以：

直接在项目中添加CSS重置代码

  1. 将你喜欢的CSS重置代码复制到这个文件中。例如，你可以使用Eric Meyer Reset或Normalize.css的代码。
  2. 在你的主CSS文件中导入这个重置文件，或者直接在HTML文档的 <head> 部分通过 <link> 标签引入

使用Normalize.css

  1. 下载Normalize.css 或者通过CDN引入。
  2. 在HTML文档的 <head> 部分引入 Normalize.css。

另外，使用通配符 * 也能简单粗暴地重置所有元素的CSS（即 * { margin: 0; padding: 0; }），但由于性能问题，它并不推荐在实际项目中使用。

这里我们使用了Eric Meyer的重置CSS：

css
/* Eric Meyer's Reset CSS v2.0 - http://meyerweb.com/eric/tools/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;
}

3. 基础样式

接下来，我们设置一些基础样式，包括页面的高度、背景色和背景图片：

css
html, body {
  height: 100vh;
}

body {
  background: #000 url('./images/bg.jpg');
}

4. 主要容器样式

.starwars 是主要的容器，我们为其设置3D透视效果，并将其居中定位：

css
.starwars {
  perspective: 800px;
  transform-style: preserve-3d;
  height: 17em;
  width: 34em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • perspective: 800px;：设置了 3D 透视效果，值为 800px，表示观察者距离屏幕的距离。
  • transform-style: preserve-3d;：保留 3D 转换效果，确保子元素在 3D 空间中正确渲染。
  • height: 17em; 和 width: 34em;：定义了容器的高度和宽度。
  • position: absolute;：将容器设置为绝对定位，使其脱离文档流。
  • top: 50%; 和 left: 50%;：将容器的顶部和左边缘定位在父元素的中心。
  • transform: translate(-50%, -50%);：通过平移将容器自身的大小移动到父元素的中心，实现水平和垂直居中。
  • 在不确定元素是否居中时，我们可以使用背景大法：background: red;此时盒子在页面中的占位会显示出来，帮助我们判断元素是否居中。

5. 图片和标题样式

把图片和标题设置绝对定位，并调整它们的位置：

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

6. 动画效果

在介绍动画效果前，我们得先理解一个概念————关键帧（Keyframe）。 简单来说，关键帧是指动画序列中设定的特定时间点上的图像或状态。这些时间点上的图像定义了动画的主要变化或动作的关键位置。

在两个关键帧之间，可以通过插值（Interpolation）的方法自动生成中间的过渡帧，从而实现平滑的动画效果。插值可以是线性的，也可以是非线性的（如贝塞尔曲线），具体取决于动画师希望达到的效果。

在《星球大战》中，我们需要达成动画通过逐渐改变文字的透明度和旋转角度，创造出一种文字从侧立状态逐渐旋转并显现，然后再次消失的效果。 我们的飞船运动效果具体代码如下：

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

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

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

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

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

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

在上述代码中发生了以下几件事：

  • 0%, 10%：在动画开始的 0% 到 10% 阶段，文字是完全透明的（opacity: 0），并且绕 Y 轴旋转了 90 度（transform: rotateY(90deg)）。这意味着文字在这个阶段是看不见的，并且是侧立的。

  • 30%：在动画进行到 30% 时，文字突然变得完全不透明（opacity: 1），这意味着文字在这个阶段完全显现出来。

  • 70%, 86%：在动画的 70% 到 86% 阶段，文字保持完全不透明（opacity: 1），并且不再绕 Y 轴旋转（transform: rotateY()）。这意味着文字在这个阶段是稳定的，没有任何旋转。

  • 95%, 100%：在动画的最后 5% 阶段，文字再次变得完全透明（opacity: 0），这意味着文字在这个阶段再次消失。

总结

通过以上步骤，我们成功地创建了一个《星球大战》主题的网页，并添加了酷炫的动画效果。这些效果包括文字的透明度变化、旋转和缩放，以及整体的3D透视效果。希望这篇文章对你有所帮助，让你能够在自己的项目中实现类似的动画效果。

R-C.png 点个赞再走吧~

avatar
文章
阅读
粉丝