純 CSS 製作 Google 載入動畫

有時候在瀏覽 Google 的服務時，會出現一個可愛的圓形翻頁載入動畫，這篇教學會介紹如何純粹透過 CSS 的圓角、虛擬元素和動畫效果，在「只使用一個 div」的狀態下，做出這個有趣的 Google 載入動畫。

快速導覽：

• 主體的變色和旋轉
• 加入翻轉葉片，實現最終效果

主體的變色和旋轉

載入動畫是一個「具有兩種顏色且不斷旋轉正圓形」，要製作這個正圓形，可參考下圖的流程，先製作出「雙色轉換」的圓形，接著加入「旋轉」效果。

透過 CSS 的邊框圓角和漸層色與 CSS 動畫，就能讓這個正圓形以每秒一次的變化速度，按照上圖的順序改變顏色。

線上展示：https://codepen.io/oxxo/pen/XJramQq

<!-- HTML 程式碼 -->
<div id="g"></div>

<!-- CSS 程式碼 -->
<style>
  #g {
    position: absolute;   /* 絕對定位 */
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;   /* 變成正圓形 */
    animation: g_color 4s step-end infinite both,
              g_rotate 4s step-end infinite both; /* 套用動畫效果 */
    transform-origin: center center;               /* 旋轉中心為中心點 */
  }

  /* 雙色變色動畫 */
  @keyframes g_color {
    0% {background: linear-gradient(#f52d27 50%, #ffd539 50%);}
    25% {background: linear-gradient(#00b262 50%, #ffd539 50%);}
    50% {background: linear-gradient(#00b262 50%, #3a71f8 50%);}
    75% {background: linear-gradient(#f52d27 50%, #3a71f8 50%);}
    100% {background: linear-gradient(#f52d27 50%, #ffd539 50%);}
  }

  /* 旋轉角度動畫 */
  @keyframes g_rotate {
    0% {transform: rotateZ(0);}
    25% {transform: rotateZ(90deg);}
    50% {transform: rotateZ(180deg);}
    75% {transform: rotateZ(270deg);}
    100% {transform: rotateZ(0);}
  }
</style>

加入翻轉葉片，實現最終效果

主體完成後，接著就可以利用虛擬元素 ::before 製作「半圓形」翻轉的葉片，首先運用邊框圓角的功能製作半圓形，接著將其定位在主體的中央，搭配變色和翻轉的動畫效果，就能做出漂亮的載入動畫，由於寬度、高度和圓角半徑都使用「百分比」，因此當主體的尺寸改變，翻轉效果也都自動改變。

線上展示：https://codepen.io/oxxo/pen/dPbzYLL

<!-- HTML 程式碼 -->
<div id="g"></div>

<!-- CSS 程式碼 -->
<style>
  #g {
    position: absolute;   /* 絕對定位 */
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;   /* 變成正圓形 */
    animation: g_color 4s step-end infinite both,
              g_rotate 4s step-end infinite both; /* 套用動畫效果 */
    transform-origin: center center;               /* 轉換中心點 */
  }

  /* 雙色變色動畫 */
  @keyframes g_color {
    0% {background: linear-gradient(#f52d27 50%, #ffd539 50%);}
    25% {background: linear-gradient(#00b262 50%, #ffd539 50%);}
    50% {background: linear-gradient(#00b262 50%, #3a71f8 50%);}
    75% {background: linear-gradient(#f52d27 50%, #3a71f8 50%);}
    100% {background: linear-gradient(#f52d27 50%, #ffd539 50%);}
  }

  /* 旋轉角度動畫 */
  @keyframes g_rotate {
    0% {transform: rotateZ(0);}
    25% {transform: rotateZ(90deg);}
    50% {transform: rotateZ(180deg);}
    75% {transform: rotateZ(270deg);}
    100% {transform: rotateZ(0);}
  }

  #g::before{
    content: "";
    position: absolute;   /* 絕對定位 */
    z-index: 2;
    top: 50%;             /* 上緣位於元素中心 */
    left: 0;
    width: 100%;          /* 寬度等同元素 */
    height: 50%;          /* 高度為元素的一半 */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;   /* 設定圓角半徑 */
    transform-origin: 50% 0;                      /* 轉換中心點 */
    animation: gb_color 4s linear infinite both,
              gb_flip 4s linear infinite both;   /* 套用動畫效果 */
  }

  /* 雙色變色動畫 */
  @keyframes gb_color{
    0%    {background: #f52d27;}
    12.5% {background: #7d0906;}
    25%   {background: #ffd539;}
    37.5% {background: #9f7d00;}
    50%   {background: #00b262;}
    62.5% {background: #00190e;}
    75%   {background: #3a71f8;}
    87.5% {background: #052e94;}
    100%  {background: #f52d27;}
  }

  /* 翻轉動畫 */
  @keyframes gb_flip{
    0%    {transform:rotateX(0deg);}
    12.5% {transform:rotateX(90deg);}
    25%   {transform:rotateX(180deg);}
    37.5% {transform:rotateX(90deg);}
    50%   {transform:rotateX(0deg);}
    62.5% {transform:rotateX(90deg);}
    75%   {transform:rotateX(180deg);}
    87.5% {transform:rotateX(90deg);}
    100%  {transform:rotateX(0deg);}
  }
</style>

小結

隨著瀏覽器對 CSS 的支援度顯著提高，現在只要透過漸層色、轉換、動畫、虛擬元素的互相搭配，不需要太過複雜的程式碼和邏輯，就能夠輕鬆做出漂亮的 Google 載入動畫，相當的方便實用。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～