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

首頁 慕課教程 雪碧圖入門教程 雪碧圖入門教程 動畫實例項目結(jié)構(gòu)

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