---
# System prepended metadata

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

---

# 🏅 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 / 答案|
|:----:|:----:|:----:|
| 01 | yoishere |[Codepen](https://codepen.io/yoishere/pen/PoreNPP)|
| 02 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/gONzayd)|
| 03 |  NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/zYVjqKJ)|
|04|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/rNEvewr)|
|05|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/ExBLKbG)|
| 06 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/eYwrZej)|
| 07 | lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/PorezNO)|
| 08 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/VwJxPdW)|
| 09 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/poXVeeg) |
| 10 | wind | [Codepen](https://codepen.io/wind7y/pen/YzoLxVj) |
| 11 | kawa | [Codepen](https://codepen.io/z83xji6/pen/YzoLOXe) |
| 12 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/YzoYOQm) |
| 13 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/QWXxbRO) |
| 14 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/eYwKWYR) |
| 15 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BagYdWo) |
| 16 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/jOjprBZ) |
| 17 | Ana | [Codepen](https://codepen.io/MarsKuo/pen/dyBjmOb) |
| 18 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/MWMqrwZ) |
| 19 | yaoling.liang| [Codepen](https://codepen.io/Yao-Ling-L-/pen/RwzqZPP) |
| 20 | hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/MWMzqqz) |
| 21 | glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/PorVOJx)|
| 22 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/dyBLxOJ) |
| 23 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/vYqorOj) |
| 24 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/MWNYKXq) |
| 25 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/YPzMeLq) |



<!--
    | No | Discord | [Codepen]() |
-->