Google 加载动画

有时候在浏览 Google 的服务时，会出现一个可爱的圆形翻页加载动画，这篇教学会介绍如何纯粹透过 CSS 的圆角、虚拟元素和动画效果，在“只使用一个 div”的状态下，做出这个有趣的 Google 加载动画。

快速导览：

• 主体的变色和旋转
• 加入翻转叶片，实现最终效果

主体的变色和旋转

加载动画是一个“具有两种颜色且不断旋转正圆形”，要制作这个正圆形，可参考下图的流程，先制作出“双色转换”的圆形，接着加入“旋转”效果。

透过 CSS 的边框圆角和渐层色与 CSS 动画，就能让这个正圆形以每秒一次的变化速度，按照上图的顺序改变颜色。

• 相关教学：CSS 动画 animation、rotate() 旋转、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 制作“半圆形”翻转的叶片，首先运用边框圆角的功能制作半圆形，接着将其定位在主体的中央，搭配变色和翻转的动画效果，就能做出漂亮的加载动画，由于宽度、高度和圆角半径都使用“百分比”，因此当主体的尺寸改变，翻转效果也都自动改变。

• 相关教学：虚拟元素选择器 ( 伪元素 )、rotate() 旋转
• 线上展示：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 加载动画，相当的方便实用。

意见反馈