---
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 初始化

 AOS.init();

## 回報流程

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


<!-- 解答：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)|