---
# System prepended metadata

title: "\U0001F3C5 Day 45"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 45

## aos + animate

### 題目

嘗試使用 [animate.css](https://animate.style/) 結合 [AOS](https://michalsnik.github.io/aos/) 做出動畫效果
使用語法、畫面不限

載入 CDN
CSS：
* https://unpkg.com/aos@2.3.1/dist/aos.css
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css 

JS：
* https://unpkg.com/aos@2.3.1/dist/aos.js

AOS 初始化
```javascript=
 AOS.init();
```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/dymgqXK
 
此解答沿用 Day43 的每日任務
並非標準答案，只要效果有執行即可
-->




回報區
---


|     Discord     |                           CodePen / 答案                           |
|:---------------:|:------------------------------------------------------------------:|
| Iris Huang#6727 |         [CodePen](https://codepen.io/ythuang/pen/vYRPXOg)          |
|  CloThEs#7837   |         [CodePen](https://codepen.io/CloThEsZ/pen/yLKrNyB)         |
|     YC#2522     |           [CodePen](https://codepen.io/YCLu/pen/VwXOyOm)           |
|    大衛#4869    |         [CodePen](https://codepen.io/exnsrpjc/pen/NWYVXQz)         |
|   Clara#1275    |         [CodePen](https://codepen.io/bsupixqu/pen/GRxayVv)         |
|   黃士桓#7654   |      [codePen](https://codepen.io/shr-huan-huang/pen/QWmRaRV)      |
|    威0#6919     | [codepen](https://codepen.io/n0918679182/pen/wvmbyMX?editors=1100) |
| Potatolee#7749  |        [codepen](https://codepen.io/potatoleee/pen/VwXOQKb)        |
|  WEI_RIO#9342   |          [codepen](https://codepen.io/wei_wu/pen/ZExNrWg)          |
|     Chi#7605    |          [Codepen](https://codepen.io/YoChi84/pen/zYWQRrx)         |
|   布魯諾#7239  |          [Codepen](https://codepen.io/bruno-yu/pen/QWmRaPB)         |
| Cliff#4606     | [Codepen](https://codepen.io/Cliff_hex/pen/zYWXgPQ?editors=1100) |
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/vYRwdMr)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/wvmbyqY) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/XWEwEmR) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/gOeJeyp?editors=1010)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/oNqRdRx)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/JjLqZVy)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/mdxZNJN)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/yLKWqKM)|
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/XWELJvL)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/poLXExK)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/QWmXqNB) 哈姆太郎！ |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/YzaoEWv)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/poLmWrM)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/vYRqVVe)|
|L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/OJveqZe?editors=1010)|
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/RwMzeEx) |
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/poLXMYV)|
|bonnieli1414#4906|[Codepen](https://codepen.io/bonnieli1414/pen/MWVNbLM?editors=1010)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/OJvKgNB) |
| mei#8421 | [CodePen](https://codepen.io/Shila-Chen/pen/zYWgQVx) |
| kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/ExLYbJm)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/RwywLBa)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/eYrNqvO)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/XWqXZEp)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/KKRzpzL)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/OJZmqEg)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/QWrqapa)|
|Melon#2481|[Codepen](https://codepen.io/BalaFang/pen/MWGqPoa)|



