---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/19(四) 每日任務

## 題目

嘗試使用 [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://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js

AOS 初始化

 AOS.init();

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/WNGNNpR) 並非標準答案，只要效果有執行即可-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/wvJmjNR
-->

<!-- 1. Alpha
Codepen:di
-->

<!-- 2. Vic
codepen: https://codepen.io/hsuan333/pen/XWRLbdg
-->

<!-- 3. Jean
codepen: https://codepen.io/jean-liu/full/YzVoRGK
-->

<!-- 4. Lina Chen
codepen: https://codepen.io/LinaChen/pen/BaRgGQQ
-->

<!-- 5. lumei
codepen: https://codepen.io/l_umei/pen/XWRLyey
-->

<!-- 6. 雷古娜
codepen: https://codepen.io/tinahopo/pen/RwVzqNb -->

<!-- 7. 陳sam
codepen :https://codepen.io/euldpliv/pen/jOmjQpz?editors=1010
-->

<!-- 8. Gill
codepen:https://codepen.io/Gill-Chin/pen/dyWBQmP
-->

<!-- 9. Cate Chang
codepen:https://codepen.io/tutz/pen/oNWrQVj
-->

<!-- 10. Tori
codepen: https://codepen.io/hayen/pen/yLbWPxZ?editors=1100
-->

<!-- 11. kevinhes
codepen: https://codepen.io/kevinhes/pen/XWRLoJv?editors=1010
-->

<!-- 12. Jerry Yen
codepen: https://codepen.io/JerryYen/pen/XWRLoqm
-->

<!-- 13. ZY Hsu
https://codepen.io/zihyin/pen/yLbdGvm -->

<!-- 14. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/OJmermZ -->

<!--15. Cheng pei-hsuan
codepen: https://codepen.io/PaCheng/pen/vYmMvaV
-->

<!-- 16. 大衛
codepem: https://codepen.io/exnsrpjc/pen/vYmqvKm?editors=1100
-->

<!-- 17. YuriT
CodePen: https://codepen.io/wenfisht/pen/dyWBwXO?editors=1100
-->

<!-- 18. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/NWjZNWK?editors=1000
-->

<!-- 19. 群嘉
CodePen: https://codepen.io/efzdamnp-the-lessful/pen/XWRLQpW
-->

<!-- 20. Joe Kuo
CodePen: https://codepen.io/alertislow/pen/zYwVQGN
-->

<!-- 21. curry
CodePen: https://codepen.io/Ted19851223/pen/NWjZVZr
-->

<!-- 22. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/jOmjoRy
-->

<!--23. Oober
https://codepen.io/xtsjrjdv/pen/QWveWrO
-->

<!-- 24. Sec
https://codepen.io/Sentiments/pen/xxdvxRm
-->

<!-- 25. 肉鬆
codepen: https://codepen.io/klrkicog/pen/poPMvyq
-->

<!-- 26. axlrock1021
codepen: https://codepen.io/andy1021/pen/MWmNYGN
-->

<!-- 27. 沈依蓉
https://codepen.io/lily-oa/pen/dyWxopm
-->

<!-- 28. hellocrab
https://codepen.io/hellocrab/pen/NWjmrqY
-->

<!-- 29.黃士桓
https://codepen.io/shr-huan-huang/pen/xxdvbyR
-->

<!-- 30. KK
https://codepen.io/potatokaka/pen/WNjVvzQ
-->

<!-- 31. Alberto
https://codepen.io/AlbertoLL/pen/xxdvVmj
-->

<!--32. jimmyFang
https://codepen.io/pohxiqqo/pen/vYmoKgB?editors=1100
-->

<!--33. twoz
https://codepen.io/twoz/pen/mdmNRor?editors=1100
-->

<!-- 34. Min Chun Tsai
Codepen: https://codepen.io/Tsai0926/pen/ZEKgrwK
-->

<!-- 35. WilsonHan
https://codepen.io/wi0821/pen/oNWKdbj
-->

<!-- 36. 阿和
codepen:https://codepen.io/shnny/pen/LYywPdr
-->

<!-- 37.Hi Annie
https://codepen.io/lhohdalu/pen/mdwbdbg
-->

<!-- 38. Gui
https://codepen.io/guitimliu/pen/LYLPRQG -->

<!-- 39. Sylvia-H
https://codepen.io/Cosmosheart/full/powzdyN -->

<!-- 40. Elaine Liu
https://codepen.io/elaine7598/pen/qBjWVYL -->

<!-- 41. ZOE WU
https://codepen.io/Zoechiueh/pen/xxrKpXK
-->

<!-- 42. Jessie Cheng
https://codepen.io/JessieMosbi/pen/ExXxMJL
-->

<!-- 43. Erin Huang
https://codepen.io/ErinHuang/pen/VwbKdmj
-->

<!-- 44. Jun Chan
CodePen: https://codepen.io/chujunchan/pen/OJgPNGB
-->

<!-- 45.zy
codepen：https://codepen.io/zy_c/pen/RwgNdry -->

<!-- 46. Sihle Huang
code : https://codepen.io/bugbug777/pen/PojPEdo
-->

<!-- 47. AKI
https://codepen.io/akichen27/pen/gORMgog
-->
<!--48. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/zYzNNBd?editors=1010
-->