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

## 練習 keyframes
### 題目

只需要更改 CSS 內的「...」並替換成程式碼
目標：使用 left 和 top 屬性讓 .box 可以**分成四個階段逆時針沿著 .wrapper 移動** (需透過 Codepen 繳交結果)

HTML

<div class="wrapper">
  <div class="box"></div>
</div>

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://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)|