动画实例项目结构_雪碧图入门教程-慕课网

经过了前几章的学习，相信同学们大都已经掌握了动画的常见用法，
那么本章我们将带领大家用一个实战项目来巩固之前所学的知识，先瞅一眼我们将会完成一个什么样的动画效果：

1. 项目结构

首先我们新建一个文件夹，代表我们此次的项目，这个文件夹只要符合操作系统的叫什么名字都可以。

在这里我们为这个项目起名为animate：

图片描述

文件夹里面新建一个index.html文件：

图片描述

然后再新建一个文件夹叫img，这个文件夹用来存放项目图片：

图片描述

再新建一个文件夹叫做css，这个文件夹用来存放我们的样式文件：

图片描述

我们需要两张雪碧图，一张矩形的：

图片描述

和一张条形的：
图片描述
然后还需要一张背景图，主要是为了让页面更美观：

图片描述

将这三张图片放入img文件夹里。

然后用编辑器打开index.html：

用英文输入法输入一个叹号：!

接着按下Tab键，就快速会生成一个 HTML5 的模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

如果你生成的代码与上述代码不完全一致的话，请不要担心，因为每款编辑器生成的模板都不太一样，并不影响编码。

但是如果你用英文输入法输入了叹号：!

并且按了Tab键，可是页面并没有出现一些看起来像 HTML 结构的标签，那么很可能是你用的编辑器不适合编码，比如记事本。

除了可以复制我上面的代码之外，还建议你下载一个 VSCode，这是目前前端界最流行的一款编辑器，经(mian)济(fei)实用。

接下来我们来修改一下index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画实战</title>
  <link rel="stylesheet" href="css/css.css">
</head>
<body>
  <div class="animate"></div>
</body>
</html>

主要是改变了一下 title，然后引入了一个 css 文件，接着加入了一个 class为 animate 的 div。

虽然引入了 css 文件，但实际上我们还没创建这个 css 文件呢，那么接下来咱们就在 css 文件夹里创建一个css.css文件：

/* 清除浏览器默认边距 */
* { padding: 0; margin: 0; }

body {
  /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 添加背景图 */
  background: url(../img/bg.jpg) center / cover;
}

.animate {
  width: 130px;
  height: 130px;
}

这时候刷新页面，如果你的浏览器窗口出现了背景图，那么恭喜你，我们的项目已经搭建成功！

2. 小结

搭建好了项目骨架之后我们就可以去定义动画啦。

快翻到下一节来看看我们将会定义一个什么样的动画吧！