搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學]利用CSS3動畫，實作出Flickr的載入動畫

[教學]利用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;」這樣動畫就會開始運作囉！此時就會看到，二顆球就會來回的跑來跑去，是不是超簡單的呀！


@keyframes應用, css3 flickr動畫, css3動畫, css3動畫教學,