# 🏅 Day 36 - aos + animate aos 與 animate 都是用於處理網頁動畫的函式庫,提供許多類型的動畫效果讓我們使用。 aos 擅長處理元素「滾動到特定區塊時觸發」的動畫,而 animate.css 則提供多種「預設的單次動畫效果」。 ### 使用方式 載入 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(); ``` ### 題目 嘗試使用 [animate.css](https://animate.style/) 結合 [AOS](https://michalsnik.github.io/aos/) 做出動畫效果 使用語法、畫面不限 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看)  <!-- 解答:https://codepen.io/fhljksmg-the-styleful/pen/empNwpa --> 回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 01 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/YPyZoXQ)| | 02 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/wBKJLpN) | | 03 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/RNWpzPL) | | 04 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/YPyZoae?editors=1100) | | 05 | Pastor |[Codepen](https://codepen.io/peter_hung/pen/EaVWqaw) | | 06 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/VYvbZaY) | | 07 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/YPyZmmK?editors=1100) | | 08 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/PwPmYLO) | | 09 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/ogjWvxv) | | 10 | 7lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/dPYWPbK) | | 11 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/XJmRbdy) | | 12 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/wBKdKYO) | | 13 | Sam.S.T.Y |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/bNVWENb) | | 14 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/ByoRjQB) | | 15 | Joguman |[Codepen](https://codepen.io/abiscc14/pen/wBKdWPQ) | | 16 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYamjjb) | | 17 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/JoYJGga) | | 18 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=yyYXKqW) | | 19 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/xbwrjZd) | | 20 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/yyYoVEP) | | 21 | 伊迪 |[Codepen]([連結](https://codepen.io/eku10rei/pen/PwPeNxQ?editors=1100)) | | 22 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/raOqrjZ) | | 23 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/empQjBV) | 24 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/PwPVNjB) | | 25 | NGNLzenos |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/vELLaEW) | | 26 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/yyOdVPg) | <!-- 快速複製 --> <!-- | 排序 | 姓名 |[Codepen](連結) | -->
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up