动画实例项目结构
经过了前几章的学习,相信同学们大都已经掌握了动画的常见,
那么本章我们将带领大家用实战项目来巩固之前所学的知识,先瞅一眼我们将会完成什么样的动画:
首先我们新建夹,代表我们此次的项目,这个夹只要符合操作系统的叫什么名字都可以。
我们为这个项目起名为animate:
夹里面新建index.html:
然后再新建夹叫img,这个夹用来存放项目:
再新建夹叫做css,这个夹用来存放我们的样式:
我们需要两张Css Sprite,一张矩形的:
和一张条形的:
将这三张放入img夹里。
然后用编辑器打开index.html:
用英文输入法输入叹号:!
接着按下Tab键,就会 HTML5 的模板:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< 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>
< charset="UTF-8">
< 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;
display: flex;
align-items: center;
justify-content: center;
/* 背景图 */
background: url(../img/bg.jpg) center / cover;
}
.animate {
width: px;
height: px;
}
这时候刷新,如果你的浏览器窗口出现了背景图,那么恭喜你,我们的项目已经搭建成功!
搭建好了项目骨架之后我们就可以去定义动画啦。
快翻到下一节来看看我们将会定义什么样的动画吧!