第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

首頁(yè) 慕課教程 雪碧圖入門教程 雪碧圖入門教程 動(dòng)畫實(shí)例項(xiàng)目結(jié)構(gòu)
手撕紅黑樹 · 更新于 2020-11-11

經(jīng)過了前幾章的學(xué)習(xí)，相信同學(xué)們大都已經(jīng)掌握了動(dòng)畫的常見用法，
那么本章我們將帶領(lǐng)大家用一個(gè)實(shí)戰(zhàn)項(xiàng)目來鞏固之前所學(xué)的知識(shí)，先瞅一眼我們將會(huì)完成一個(gè)什么樣的動(dòng)畫效果：

1. 項(xiàng)目結(jié)構(gòu)

首先我們新建一個(gè)文件夾，代表我們此次的項(xiàng)目，這個(gè)文件夾只要符合操作系統(tǒng)的叫什么名字都可以。

在這里我們?yōu)檫@個(gè)項(xiàng)目起名為animate：

圖片描述
圖片描述

文件夾里面新建一個(gè)index.html文件：

圖片描述

然后再新建一個(gè)文件夾叫img，這個(gè)文件夾用來存放項(xiàng)目圖片：

圖片描述

再新建一個(gè)文件夾叫做css，這個(gè)文件夾用來存放我們的樣式文件：

圖片描述

我們需要兩張雪碧圖，一張矩形的：

圖片描述

和一張條形的：
圖片描述
然后還需要一張背景圖，主要是為了讓頁(yè)面更美觀：

圖片描述

將這三張圖片放入img文件夾里。

然后用編輯器打開index.html：

用英文輸入法輸入一個(gè)嘆號(hào)：!

接著按下Tab鍵，就快速會(huì)生成一個(gè) 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>

如果你生成的代碼與上述代碼不完全一致的話，請(qǐng)不要擔(dān)心，因?yàn)槊靠罹庉嬈魃傻哪０宥疾惶粯?，并不影響編碼。

但是如果你用英文輸入法輸入了嘆號(hào)：!

并且按了Tab鍵，可是頁(yè)面并沒有出現(xiàn)一些看起來像 HTML 結(jié)構(gòu)的標(biāo)簽，那么很可能是你用的編輯器不適合編碼，比如記事本。

除了可以復(fù)制我上面的代碼之外，還建議你下載一個(gè) VSCode，這是目前前端界最流行的一款編輯器，經(jīng)(mian)濟(jì)(fei)實(shí)用。

接下來我們來修改一下index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動(dòng)畫實(shí)戰(zhàn)</title>
  <link rel="stylesheet" href="css/css.css">
</head>
<body>
  <div class="animate"></div>
</body>
</html>

主要是改變了一下 title，然后引入了一個(gè) css 文件，接著加入了一個(gè) class為 animate 的 div。

雖然引入了 css 文件，但實(shí)際上我們還沒創(chuàng)建這個(gè) css 文件呢，那么接下來咱們就在 css 文件夾里創(chuàng)建一個(gè)css.css文件：

/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }

body {
  /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

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

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

這時(shí)候刷新頁(yè)面，如果你的瀏覽器窗口出現(xiàn)了背景圖，那么恭喜你，我們的項(xiàng)目已經(jīng)搭建成功！

2. 小結(jié)

搭建好了項(xiàng)目骨架之后我們就可以去定義動(dòng)畫啦。

快翻到下一節(jié)來看看我們將會(huì)定義一個(gè)什么樣的動(dòng)畫吧！