開始進入後半段啦!聯絡我們和首頁其實也做的差不多了。

接下來的日子會教一些我覺得很好看的動畫設計，可以用在裝飾或是loading畫面。

預計會教五個款式。今天就先來第一個!

.html

    <div id="spinningSquaresG">
        <div id="spinningSquaresG_1" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_2" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_3" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_4" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_5" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_6" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_7" class="spinningSquaresG"></div>
        <div id="spinningSquaresG_8" class="spinningSquaresG"></div>
    </div>

.css
內容有部分註解，都打在裡面了

#spinningSquaresG {
  position: relative;
  width: 228px;
  height: 28px;
  margin: auto;
  //設定一格228*28大的區域等一下會加入其他元素
}

.spinningSquaresG {
  position: absolute;
  top: 0;
  background-color: rgba(255, 255, 255, 0);
  width: 28px;
  height: 28px;
  //元素內方塊基本設定
  animation-name: bounce_spinningSquaresG;
  animation-duration: 1.035s;
  //定義動畫完成一次週期的時間
  animation-iteration-count: infinite;
  //定義動畫重複的次數，可以設定infinite就無限播放
  animation-direction: normal;
  transform: scale(0.3);
}
#spinningSquaresG_1 {
  left: 0;
  animation-delay: 0.416s;
}
//每個小方塊的基礎設定，第一個定位在left: 0

#spinningSquaresG_2 {
  left: 28px;
  animation-delay: 0.5225s;
}
//每個小方塊的基礎設定，第二個定位在left: 28px，因為每個設定大小是28px
//後面依此類推

#spinningSquaresG_3 {
  left: 57px;
  animation-delay: 0.619s;
  -o-animation-delay: 0.619s;
  -ms-animation-delay: 0.619s;
  -webkit-animation-delay: 0.619s;
  -moz-animation-delay: 0.619s;
}

#spinningSquaresG_4 {
  left: 85px;
  animation-delay: 0.7255s;
  -o-animation-delay: 0.7255s;
  -ms-animation-delay: 0.7255s;
  -webkit-animation-delay: 0.7255s;
  -moz-animation-delay: 0.7255s;
}

#spinningSquaresG_5 {
  left: 114px;
  animation-delay: 0.832s;
  -o-animation-delay: 0.832s;
  -ms-animation-delay: 0.832s;
  -webkit-animation-delay: 0.832s;
  -moz-animation-delay: 0.832s;
}

#spinningSquaresG_6 {
  left: 142px;
  animation-delay: 0.9385s;
  -o-animation-delay: 0.9385s;
  -ms-animation-delay: 0.9385s;
  -webkit-animation-delay: 0.9385s;
  -moz-animation-delay: 0.9385s;
}

#spinningSquaresG_7 {
  left: 171px;
  animation-delay: 1.035s;
  -o-animation-delay: 1.035s;
  -ms-animation-delay: 1.035s;
  -webkit-animation-delay: 1.035s;
  -moz-animation-delay: 1.035s;
}

#spinningSquaresG_8 {
  left: 199px;
  animation-delay: 1.1415s;
  -o-animation-delay: 1.1415s;
  -ms-animation-delay: 1.1415s;
  -webkit-animation-delay: 1.1415s;
  -moz-animation-delay: 1.1415s;
}

@keyframes bounce_spinningSquaresG {
  0% {
    transform: scale(1);
    background-color: #000000;
  }

  100% {
    transform: scale(0.3) rotate(90deg);
    background-color: rgb(8, 207, 157);
  }
}

成果展示:

參考資料(一些酷炫CSS範例):

https://cssload.net/en/horizontal-bars

以上是我開賽的第十六天，讓我們來期待第十七天的到來吧!
加油、加油! 倒數14天。