---
# System prepended metadata

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

---

### 題目

嘗試使用 [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| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/LYMpRJd) |
|02| hebin.| [Codepen](https://codepen.io/landyhsiao776/pen/OJryREY) |
|03| Berlin| [Codepen](https://codepen.io/3qberlin/pen/yLGYaGa) |
|04| Pinyi_9| [Codepen](https://codepen.io/Wpypy/pen/zYyvKgP) |
|05| townyuan | [CodePen](https://codepen.io/townyuan/pen/RwEWowO) |
|06| 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/bGOVwmb) |
|07| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/eYbpBEV)|
|08| Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/MWZajPb) |
| 09 | AYA | [CodePen](https://codepen.io/NoNameNote/full/oNJjYQK) |
| 10| deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/eYbpBxL) |
| 11| Uli | [Codepen](https://codepen.io/uli1313/pen/mdaeRER) |
| 12 | Atsushi#6888 | [CodePen](https://codepen.io/atsushi-amuro/pen/JjwYEOY) |
| 13 | meowmeow | [CodePen](https://codepen.io/snow1224/pen/QWzjdqB) |
| 14 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/qBLOrBr) |
| 15| hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/poqjRmm) |
| 16 |Moreene | [CodePen](https://codepen.io/Moreene/pen/RwEWpPQ)|
| 17 | lychee_kk | [CodePen](https://codepen.io/kakakala/pen/yLGYMVy) |
| 18 | orias_000 | [CodePen](https://codepen.io/qoq77416416/pen/RwEWpZB?editors=1010) |
| 19 | ovo.yun | [CodePen](https://codepen.io/yun-the-scripter/pen/BavoWNq?editors=1100) |
| 20 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/PoXPpMM) |
| 21 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/abPvwLb) |
| 22 | SmallP | [Codepen](https://codepen.io/smallp/pen/YzdypLK) |
| 23 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/OJryxEX) |
| 24 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/wvRKPzr) |
| 25 | wind | [CodePen](https://codepen.io/wind7y/pen/qBLOpYV) |
| 26 | shcopy | [CodePen](https://codepen.io/shcopy/pen/bGOVxKP) |
| 27 | runweiting | [CodePen](https://codepen.io/weiting14/pen/ExGVOQY) |
| 28 | Yu | [CodePen](https://codepen.io/yuch3n_chen/pen/ExGVMvB) |
| 29 | soniawu | [CodePen](https://codepen.io/YUJOU/pen/PoXZYYv) |
| 30 | kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/oNJjOjW) |
| 31 | hannahTW | [CodePen](https://codepen.io/hangineer/pen/oNJjGga) |
| 32 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/bGOVqpz) |
| 33 | m_m | [CodePen](https://codepen.io/minnn7716/pen/bGOEqpm) |
| 34 | Hana | [CodePen](https://codepen.io/hananalin/pen/OJrybrb) |
| 35 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/YzdwxdL) |
| 36 | adele6199 | [CodePen](https://codepen.io/codepen-io-winnie/pen/BavjwRa) |
| 37 | Kimi | [CodePen](https://codepen.io/kimihu91/pen/GRPoagw) |
| 38 | .icesam | [CodePen](https://codepen.io/icesam/pen/MWZKMqP) |
| 39 | Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/QWzKMoV) |
| 40 | 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/ZEVLQXr) |
| 41 | RX00#5351 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/BavpOaB) |
| 42 | Randy | [CodePen](https://codepen.io/landy510/pen/RwEpWde?editors=1100) |
| 43 | Long | [CodePen](https://codepen.io/Loonng/pen/VwqppOo) |
| 44 | 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/GRPpwjN) |
| 45 | tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/YzdeeQV) |
| 46 | patrickpie | [CodePen](https://codepen.io/patrickpie/pen/OJrvGEN) |



<!-- 快速複製格式 

| 00 | user | [CodePen]() |

-->