---
# System prepended metadata

title: "\U0001F3C5 Day 42"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 42

## 練習 keyframes
### 題目

只需要更改 CSS 內的「...」並替換成程式碼
目標：使用 left 和 top 屬性讓 .box 可以**分成四個階段逆時針沿著 .wrapper 移動** (需透過 Codepen 繳交結果)
 
HTML
```htmlembedded=
<div class="wrapper">
  <div class="box"></div>
</div>
```
CSS
```css=
@keyframes example{
  ...
}

.box{
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite; 
  animation-fill-mode: both; 
}
.wrapper{
  width: 300px;
  height: 300px;
  border:1px solid black;
}
```



## 回報流程

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

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

<!-- 解答：https://codepen.io/hexschool/pen/JjLaZZY -->




回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/JjLzRjo)          |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/rNdRqQz)          |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/KKoEGbg)            |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/NWYJOVx)          |
|    Chaoci#2460    |         [CodePen](https://codepen.io/gmailchao/pen/zYWbMOR)         |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/WNzmaqw?editors=1100) |
|    JackC#0411     |          [CodePen](https://codepen.io/key0329/pen/xxWByvz)          |
|     Chi#7605      |          [Codepen](https://codepen.io/YoChi84/pen/eYMXQNe)          |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGvZmyV?editors=1100) |
|WEI_RIO#9342|[CodePen](https://codepen.io/wei_wu/pen/wvmOQGG?editors=0100)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/RwMdqxP?editors=1100)|
| LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/WNzmYzO)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/mdxoQjV)|
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/mdxoQKV?editors=0100)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/OJvqaem) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/KKoErOe)|
| yuyu#6310 |[CodePen](https://codepen.io/yuyu0905/pen/qBovLqO?editors=1100)|
| Potatolee#7749 |[CodePen](https://codepen.io/potatoleee/pen/oNqVmve)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/jOzJdZb?editors=0100)|
|雷雷#7844|[codepen](https://codepen.io/lei-yi-jie/pen/jOzJJEV)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/qBovwdE?editors=1100)|
|949cat 𓃠#2154|[Codepen](https://codepen.io/Ariel_Chen/pen/mdxvNLx)|
|Ryan Chiang#6649|[COdepen](https://codepen.io/ryanchiang/pen/jOzJomO)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/oNqVROP)|
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/xxWBooo)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/KKoEOwe)|
| Yunei#6323 |[codepen](https://codepen.io/Yunei/pen/dymLbMZ)|
| Glamorouscoast#4095 |[codepen](https://codepen.io/GcTzw/pen/OJvGLaK)|
| RayChen#6088 |[codepen](https://codepen.io/raychen1996/pen/jOzROdY)|
| CloThEs#7837 |[codepen](https://codepen.io/CloThEsZ/pen/NWYmPry)|
|SASIMI#5099|[codepen](https://codepen.io/sashimi1327/pen/dymLPKN)|
|鉦勝 #8333|[codepen](https://codepen.io/atckmax823/pen/vYRMgvO)|
|yen #5757|[codepen](https://codepen.io/TZU-HUANG-YEN/pen/yLKWpNv)|
|NeilLin#3009|[codepen](https://codepen.io/a0071421/pen/OJvYQKq)|
|YI#0863|[codepen](https://codepen.io/YI0305/pen/MWVdBBo)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/wvmbEPe)|
|黑白兔#0684|[codepen](https://codepen.io/johnny329/pen/RwMzGMr)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/yLKdmzP)|
|kevin8349#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/BarXWjN)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/oNqKRmz)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/VwxZaGK)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/oNdvBmE)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/XWqbwjR)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/GRdprQq?editors=1100)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/abGWGvv)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/XWqeJdo)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/wvjePRq)|