---
# System prepended metadata

title: "\U0001F3C5 Day 40 - Marquee 跑馬燈實作"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 40 - Marquee 跑馬燈實作

今天要來實作第八週首頁的跑馬燈區塊
![image](https://hackmd.io/_uploads/HJcJv-gIgx.png)

由於跑馬燈需要製造出區塊緩速滾動的效果，很適合使用 @keyframes 來設計這樣的簡易動畫。

### animation 常用屬性介紹
* animation-duration：用於設定動畫完整時間。
* animation-iteration-count：設定動畫播放次數，若無限循環可使用 `infinite` 值。
* animation-direction：決定動畫循環時的播放順序。
    * normal （預設值）： 動畫每次都從頭到尾播放。
    * reverse： 動畫每次都從尾到頭反向播放。
    * alternate： 動畫在奇數次（1, 3, 5...）從頭到尾播放，在偶數次（2, 4, 6...）從尾到頭反向播放。
    * alternate-reverse： 動畫在奇數次從尾到頭反向播放，在偶數次從頭到尾播放。
* animation-timing-function：決定整個動畫的速率，即動畫的加速度曲線。
    * ease （預設值）： 慢速開始，然後加速，然後慢速結束。
    * linear： 以恆定速度開始到結束。
    * ease-in： 慢速開始，然後加速。
    * ease-out： 快速開始，然後慢速結束。

### 題目
使用此 [CodePen 範本](https://codepen.io/fhljksmg-the-styleful/pen/EaVavQp?editors=1100)，依照下方提示調整 CSS 區塊 `...` 的部分，加入對應的 animation 屬性設定，讓跑馬燈能正確運行。

提示：
- 動畫時間 10 秒。
- 無限循環。
- 循環播放方式為頭到尾、再從尾到頭。
- 動畫速度恆定。


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/fhljksmg-the-styleful/pen/ZYbYJLJ?editors=1100
-->




回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/PwPjMNy) |
|  02  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/xbwrvXL) |
|  03  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/VYvWoRE?editors=1100) |
|  04  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/zxvzgaz) |
|  05  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/pvjrzvR) |
|  06  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/VYvzwWK?editors=1100) |
|  07  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/NPGvWOL) | 
|  08  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/qEOXBGq?editors=1100) | 
|  09  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/yyYoNJb?editors=1100) |
|  10  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/jEbLboJ) |
|  11  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/RNWZGGM?editors=1100) | -->
|  12  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/xbwLRbW?editors=1100) |
|  13  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ogjeBNN?editors=1100) |
|  14  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/VYvzQrN) |
|  15  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/pvjrgGb?editors=1100) |
|  16  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/empEojz) |
|  17  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/NPGagBy?editors=1100) |
|  18  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/WbQZawN?editors=1100) |
|  19  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/WbQKEyQ?editors=1100) |
|  20  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/pvjQOgx) |
|  21  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/EaVrKGW?editors=1100) |
|  22  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/emJJLEy?editors=1100) |
|  23  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ZYWdLWo?editors=1100) |
<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->