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

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

經(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é)來看看我們將會定義一個什么樣的動畫吧！