---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/16(ㄧ) 每日任務
## 題目

只需要更改 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;
}

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


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/yLeZVNL) -->

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

<!-- 1. Alpha
Codepen:https://codepen.io/alphatero/pen/bGWJmPr
-->

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

<!-- 3. 雷古娜
codepen:https://codepen.io/tinahopo/pen/mdmgQVR
-->

<!-- 4. xing
codepen: https://codepen.io/xing10/pen/KKmYrMB
-->

<!-- 5. Jean
codepen: https://codepen.io/jean-liu/pen/Pomgxzj
-->

<!-- 6. 大衛
codepen: https://codepen.io/exnsrpjc/pen/dyWLQGG
-->

<!-- 7. lumei
codepen: https://codepen.io/l_umei/pen/QWvPJEr
-->

<!-- 8. Lina Chen
codepen: https://codepen.io/LinaChen/pen/Pomgxwm
-->

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

<!-- 10. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/bGWJQvK?editors=1100
-->

<!-- 11. curry
codepen: https://codepen.io/Ted19851223/pen/eYWoQLO
-->

<!-- 12. KK
codepen: https://codepen.io/potatokaka/pen/PomgxJO?editors=1100
-->

<!-- 13. kevinhes
codepen:　https://codepen.io/kevinhes/pen/eYWoQqN
-->

<!-- 14. Gill
codepen:https://codepen.io/Gill-Chin/pen/poPBQXX
-->

<!-- 15. 肉鬆
codepen: https://codepen.io/klrkicog/pen/bGWJOdz?editors=1100
-->

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

<!-- 17. Sz
https://codepen.io/szyln/pen/eYWobLv
-->

<!-- 18. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/RwVOEeE?editors=1100
-->

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

<!-- 20. YuriT
codepen: https://codepen.io/wenfisht/pen/VwbNgqw
-->

<!-- 21.阿瓜
https://codepen.io/hoick/pen/rNmbRNo -->

<!-- 22. Tsai 明達
Codepen: https://codepen.io/bmzpfyxe/pen/LYWabjr?editors=1100
-->

<!-- 23. Gui
https://codepen.io/guitimliu/pen/jOmoNPM -->

<!-- 24. hellocrab
https://codepen.io/hellocrab/pen/wvdbwZd
-->

<!-- 25. Hi Annie
https://codepen.io/lhohdalu/pen/xxdNKNe
-->

<!-- 23. 群嘉
Codepen: https://codepen.io/efzdamnp-the-lessful/pen/yLbWLex?editors=1100
-->

<!-- 24. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/BaReaKd
-->

<!-- 25. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/ZEKNGzK
-->

<!-- 26. 黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/WNjBvZR
-->
<!-- 27. Jocelyn
codepen: https://codepen.io/enjoyful/pen/OJmYyym?editors=0100
-->

<!-- 28. huanan
codepen: https://codepen.io/hua_nan/pen/ExmzKzr
-->

<!--29. 阿和
codepen:https://codepen.io/shnny/pen/gOWJGZP?editors=1100
-->

<!--30. KinHei Shing
codepen:https://codepen.io/kinhei-shing/pen/NWjVwjX
-->

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

<!-- 32. 陳sam
codepen:https://codepen.io/euldpliv/pen/wvdbmEm
-->

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

<!-- 34.Jim Hwang
https://codepen.io/jimh1129/pen/jOmovXE
-->
<!-- 35.格可
https://codepen.io/catabo/pen/rNmgZVa
-->

<!-- 34.Joe Kuo
https://codepen.io/alertislow/pen/xxdoZOV
-->
<!-- 35.yellamoon
https://codepen.io/pwbzvqja/pen/XWRLjEd
-->

<!--36. Alberto
https://codepen.io/AlbertoLL/pen/PomrjNz
-->

<!--37. axlrock1021
https://codepen.io/andy1021/pen/QWvXZGb
-->

<!-- 38.ZY Hsu
https://codepen.io/zihyin/pen/BaRgGmW -->

<!--39. Riley
https://codepen.io/jjpxbprd/pen/mdmZaYj
-->

<!--40. Oober
https://codepen.io/xtsjrjdv/pen/VwbowQY
-->

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

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

<!-- 43. WilsonHan
https://codepen.io/wi0821/pen/qBmeoeW
-->

<!--44. Sihle Huang
code: https://codepen.io/bugbug777/pen/abWeedg
-->

<!--45. yurie
code: https://codepen.io/_u_jung/pen/QWgLwvx
-->

<!--46. una
code: https://codepen.io/xbsapbas-the-vuer/pen/qBjWrbW?editors=1100
-->

<!--47. Sylvia-H
https://codepen.io/Cosmosheart/pen/vYZBWYv -->

<!-- 48. Elaine Liu
https://codepen.io/elaine7598/pen/PojYOYr -->

<!-- 49. ZOE WU
https://codepen.io/Zoechiueh/pen/ExXYoPM?editors=1100
-->

<!-- 50. Jessie Cheng
https://codepen.io/JessieMosbi/pen/jOwOJwW
-->

<!-- 51. Erin Huang
https://codepen.io/ErinHuang/pen/QWvPjoR
-->

<!-- 52. Jun Chan
codepen: https://codepen.io/chujunchan/pen/rNwaerV
-->

<!-- 53. AKI
https://codepen.io/akichen27/pen/zYzBNZe
-->

<!-- 54. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/ZEypOWr?editors=1100
-->
<!--. 袁祥恩
codepen:https://codepen.io/ovfxsavp-the-bashful/pen/oNwBYEe?editors=1100
-->