CSS, CSS3, 網頁設計

[教學]利用CSS3動畫,實作出Flickr的載入動畫

梅干2018/03/21
梅問題-[教學]利用CSS3動畫,實作出Flickr的載入動畫
  以前只要是要製作網頁動畫,第一個就會想到Flash,但隨著Flash相當吃資源,因此對於智慧型手機而言,在載入時則會造成手機當掉的情況發生,因此在智慧型手機中的瀏覽器,則無法直接瀏覽Flash所製作的動畫,也因此讓Flash漸漸的退出網頁的市場,當Flash消失後,現在要在網頁中,顯示動畫就得使用CSS3的動畫屬性,雖然CSS3的動畫屬性不是現在才有,而是先前有瀏覽器支援度的問題,因此先前梅干則較常使用jQuery來製作網頁的動畫效果。
  雖然說用jQuery製作動畫,較沒有瀏覽器相容的問題,但在製作上得花不少時間,同時還得寫一些邏輯運算式,這對於數學不好的梅干,總是在那算半天,但現在透過CSS3的動畫屬性,不但可快速的製作出動畫效果,同時完全不用再寫程式碼,只需設定動畫的移動規則,立即就可將網頁中的區塊給動起來,而先前梅干也曾分享過,利用CSS3動畫,來實作出輪播的效果,接下來梅干一樣利用CSS3的動畫屬性,來實作出像Flickr載入時動畫。
Step1
首先,先建立好HTML的標籤,而這邊梅干用了一個DIV,包了二個B標籤,用來設定Flickr的二顆圓球。
<div class="flickr-loader">
  <b class="dot-pink"></b>
  <b class="dot-blue"></b>
</div>

Step2
接著利用CSS來設定DIV的區塊大小,與二個B標籤,分別將二個B標籤,各別加入桃紅色與藍色背景。
.flickr-loader {
  position: relative;
  width: 110px;
  height: 50px;
  background:#333;
}

.dot-pink, 
.dot-blue {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.dot-pink {
  background: #ff2e92;
  left: 0;
}

.dot-blue {
 background: #007bdc;
 right: 0;
}

Step3
這時候二顆圓球,會緊貼在DIV的兩側。
梅問題-[教學]利用CSS3動畫,實作出Flickr的載入動畫
Step4
接著加入CSS3的影格動畫,由於一個是齊左一個齊右,因此當在移動時,只需將二個位置各移動,原DIV大小的一半,二顆球就會移動重疊在一起。
@keyframes pink {
  0% {
    z-index: 1;
  }
 50% {
    left:50px;
  }
}
@keyframes blue {
  50% {
    right:50px;
  }
}

Step5
接著在.dot-pink, .dot-blue加入「animation: 1s ease-in-out infinite;」,以及.dot-pink加入「animation-name: pink;」,和.dot-blue加入「animation-name: blue;」這樣動畫就會開始運作囉!此時就會看到,二顆球就會來回的跑來跑去,是不是超簡單的呀!