經(jīng)過了前幾章的學(xué)習(xí),相信同學(xué)們大都已經(jīng)掌握了動畫的常見用法,
那么本章我們將帶領(lǐng)大家用一個實戰(zhàn)項目來鞏固之前所學(xué)的知識,先瞅一眼我們將會完成一個什么樣的動畫效果:
1. 項目結(jié)構(gòu)
首先我們新建一個文件夾,代表我們此次的項目,這個文件夾只要符合操作系統(tǒng)的叫什么名字都可以。
在這里我們?yōu)檫@個項目起名為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>
如果你生成的代碼與上述代碼不完全一致的話,請不要擔(dān)心,因為每款編輯器生成的模板都不太一樣,并不影響編碼。
但是如果你用英文輸入法輸入了嘆號:!
并且按了Tab鍵,可是頁面并沒有出現(xiàn)一些看起來像 HTML 結(jié)構(gòu)的標(biāo)簽,那么很可能是你用的編輯器不適合編碼,比如記事本。
除了可以復(fù)制我上面的代碼之外,還建議你下載一個 VSCode,這是目前前端界最流行的一款編輯器,經(jīng)(mian)濟(jì)(fei)實用。
接下來我們來修改一下index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動畫實戰(zhàn)</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="animate"></div>
</body>
</html>
主要是改變了一下 title,然后引入了一個 css 文件,接著加入了一個 class為 animate 的 div。
雖然引入了 css 文件,但實際上我們還沒創(chuàng)建這個 css 文件呢,那么接下來咱們就在 css 文件夾里創(chuàng)建一個css.css文件:
/* 清除瀏覽器默認(rèn)邊距 */
* { 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;
}
這時候刷新頁面,如果你的瀏覽器窗口出現(xiàn)了背景圖,那么恭喜你,我們的項目已經(jīng)搭建成功!
2. 小結(jié)
搭建好了項目骨架之后我們就可以去定義動畫啦。
快翻到下一節(jié)來看看我們將會定義一個什么樣的動畫吧!