经过了前几章的学习，相信同学们大都已经掌握了动画的常见 用法 ，
那么本章我们将带领大家用 一个 实战项目来巩固之前所学的知识，先瞅一眼我们将会完成 一个 什么样的动画 效果 ：
1. 项目结构
首先我们新建 一个 文件 夹，代表我们此次的项目，这个 文件 夹只要符合操作系统的叫什么名字都可以。
在这里 我们为这个项目起名为 animate ：
文件 夹里面新建 一个 index.html 文件 ：
然后再新建 一个 文件 夹叫 img ，这个 文件 夹用来存放项目 图片 ：
再新建 一个 文件 夹叫做 css ，这个 文件 夹用来存放我们的样式 文件 ：
我们需要两张Css Sprite，一张矩形的：
和一张条形的：
然后还需要一张背景图，主要是为了让 页面 更美观：
将这三张 图片 放入 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 : ; margin : ; }
body {
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
/* 添加 背景图 */
background : url(img/bg.jpg) center / cover ;
}
.animate {
width : px ;
height : px ;
}这时候刷新 页面 ，如果你的浏览器窗口出现了背景图，那么恭喜你，我们的项目已经搭建成功！
2. 小结
搭建好了项目骨架之后我们就可以去定义动画啦。
快翻到下一节来看看我们将会定义 一个 什么样的动画吧！