哇嗚！終於第十天了，經歷三分之一的鐵人賽了（（覺得有點小開心d(`･∀･)b

今天就來把昨天分享的:嘿Animation就是CSS動畫，說好要做炫砲動畫的一日練習放上來，（我是覺得蠻炫砲的，畢竟新手的我會覺得什麼都很酷XD)

這個是今日所做的：https://codepen.io/cinj/pen/NWNoNOa?editors=1100
喜歡低話再繼續看下去！━(ﾟ∀ﾟ)━( ﾟ∀)━( ﾟ)━( )━( )━(ﾟ)━(∀ﾟ)━(ﾟ∀ﾟ)━

1.先把html及css改成PUG與sass

2.創建一個.middle，這個是因待會要設置在畫面中央以便觀看

3.建立.container用來改變旋轉角度，使用emmet：.container$*30>.ball，＄代表1~30

.middle
  .container$*30>.ball

接下來就是sass的部分（下面有詳解）：

// @mixin
// 可以簡寫成 =size

=size($w,$h:$w)
  width: $w
  height: $h
  
html,body
  +size(100%)
  background-color: #222
  display: flex
  justify-content: center
  align-items: center
.middle
  position: relative
.ball
  +size(20px)
  background-color: #fff
  border-radius: 50%
  position: absolute
  animation: ballani 2s infinite alternate
  // 把球做移左右動 //
@keyframes ballani
  0%
    transform: translateX(0px)
  50%
    +size(50px)
  100%
    transform: translateX(200px)
    background-color: red
  
// .container2  -->這行註解原因可看下列第6點
//   transform: rotate(90deg)

@for $i from 1 through 30
  // 因為.container不是屬性，所以要用嵌入法#{}
  .container#{$i}
    transform: rotate(#{$i*360/30}deg) 
	// 還沒加上.ball前動畫會是散狀,可以先實驗這個效果
    .ball
      animation-delay: -$i*0.1s
  

1.寫一組size方便快速設置每個大小（@mixin可以簡寫成=size）。

2.把html&body調成黑色背景。

3.設置.ball先讓球看得到，再來設置.middle，在.ball設置position: absolute是為了讓球全部重疊在一起。

4.middle包了所有的球，.middle設置position: relative。

5.再來要讓球做移動，做一個關鍵影格設置動畫內容。

6.包住ball的容器做旋轉，每個ball相對旋轉的角度就會不一樣。

上面有個註解，可以實驗看看：

.container2
	transform: rotate(90deg)

會發現有一個球是往下跑，因裝住他的容器被轉了90度，所以球也會跟著轉90度。

7.最後，我們根據上述原理，使用迴圈就能做出最終效果。

那今天就醬子囉！感謝收看◑ω◐
有史以來最早打完的一天，終於可以繼續研究JS啦(´・ω・`)