CSS 多重繞圈 3D 動畫

這篇教學會使用元素的多重陰影製作圓點圓環，接著透過 transform 讓多組圓點圓環變成 3D 的多重繞圈，最後搭配 animation 製作有趣的多重繞圈 3D 動畫。

快速導覽：

• 使用 box-shadow 製作圓點圓環
• 使用 transform 製作 3D 多重繞圈
• 使用 animation + 變數製作動畫

使用 box-shadow 製作圓點圓環

參考「CSS 製作圓點載入動畫 ( 陰影動畫 )」教學，將元素本身的背景色設定為透明，運用 box-shadow 在特定位置產生陰影，就能產生十六個圓點圍成圓環的效果。

參考：容器陰影 box-shadow

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

<!-- HTML 程式碼 -->
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  .c {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 10px;
    height: 10px;
    background: #0000;    /* 元素本身透明 */
    border-radius: 50%;   /* 圓角產生圓形，影子才會是圓形 */
    /* 多重陰影 */
    box-shadow: 
      #f00 50px 0 0 0,
      #f00 46.19px 19.14px 0 0,
      #f00 35.36px 35.36px 0 0,
      #f00 19.14px 46.19px 0 0,
      #f00 0 50px 0 0,
      #f00 -19.14px 46.19px 0 0,
      #f00 -35.36px 35.36px 0 0,
      #f00 -46.19px 19.14px 0 0,
      #f00 -50px 0 0 0,
      #f00 -46.19px -19.14px 0 0,
      #f00 -35.36px -35.36px 0 0,
      #f00 -19.14px -46.19px 0 0,
      #f00 0 -50px 0 0,
      #f00 19.14px -46.19px 0 0,
      #f00 35.36px -35.36px 0 0,
      #f00 46.19px -19.14px 0 0;
  }
</style>

使用 transform 製作 3D 多重繞圈

將上方範例的元素用一個類別為 space 的 div 包覆，最外層再用一個類別為 camera 的 div 包覆，透過這兩個 div 將圓點圓環變成一個 3D 空間，在 HTML 裡複製多組圓點圓環，分別運用 transform 繞著 Y 軸逐漸旋轉，旋轉後往 X 方向平移，就能產生 3D 多重繞圈的效果。

參考：CSS transform 轉換函式、CSS transform 3D 轉換與透視

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

<!-- HTML 程式碼 -->
<div class="camera">
  <div class="space">
    <div class="c c0"></div>
    <div class="c c1"></div>
    <div class="c c2"></div>
    <div class="c c3"></div>
    <div class="c c4"></div>
    <div class="c c5"></div>
    <div class="c c6"></div>
    <div class="c c7"></div>
    <div class="c c8"></div>
    <div class="c c9"></div>
    <div class="c c10"></div>
    <div class="c c11"></div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    position: absolute;
    top: 200px;
    left: 300px;
    perspective: 5000px;    /* 視角 */
    perspective-origin: center center; /* 透視中心 */
  }
  .space {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;  /* 內容元素都是在同一個 3D 空間 */
    transform: rotateX(30deg);     /* 繞 X 軸旋轉 30deg 方便觀察*/
  }
  .c {
    position: absolute;
    left: 0;      /* 統一定位在左上方 */
    top: 0;
    width: 10px;
    height: 10px;
    background: #0000;    /* 元素本身透明 */
    border-radius: 50%;   /* 圓角產生圓形，影子才會是圓形 */
    /* 多重陰影 */
    box-shadow: 
      #f00 50px 0 0 0,
      #f00 46.19px 19.14px 0 0,
      #f00 35.36px 35.36px 0 0,
      #f00 19.14px 46.19px 0 0,
      #f00 0 50px 0 0,
      #f00 -19.14px 46.19px 0 0,
      #f00 -35.36px 35.36px 0 0,
      #f00 -46.19px 19.14px 0 0,
      #f00 -50px 0 0 0,
      #f00 -46.19px -19.14px 0 0,
      #f00 -35.36px -35.36px 0 0,
      #f00 -19.14px -46.19px 0 0,
      #f00 0 -50px 0 0,
      #f00 19.14px -46.19px 0 0,
      #f00 35.36px -35.36px 0 0,
      #f00 46.19px -19.14px 0 0;
  }
  .c0 {transform: rotateY(0deg) translate(100px,0);}
  .c1 {transform: rotateY(-30deg) translate(100px,0);}
  .c2 {transform: rotateY(-60deg) translate(100px,0);}
  .c3 {transform: rotateY(-90deg) translate(100px,0);}
  .c4 {transform: rotateY(-120deg) translate(100px,0);}
  .c5 {transform: rotateY(-150deg) translate(100px,0);}
  .c6 {transform: rotateY(-180deg) translate(100px,0);}
  .c7 {transform: rotateY(-210deg) translate(100px,0);}
  .c8 {transform: rotateY(-240deg) translate(100px,0);}
  .c9 {transform: rotateY(-270deg) translate(100px,0);}
  .c10 {transform: rotateY(-300deg) translate(100px,0);}
  .c11 {transform: rotateY(-330deg) translate(100px,0);}
</style>

使用 animation + 變數製作動畫

延伸上方範例程式碼，將 HTML 裡新增 style 屬性，在屬性中新增 CSS 變數 --c 作為該圓環的顏色，接著在 CSS 中也新增 --deg 變數作為旋轉角度，如此一來就能只撰寫一次動畫程式碼，根據變數數值產生不同的動畫效果。

參考：CSS 動畫 animation、CSS 變數

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

<!-- HTML 程式碼 -->
<div class="camera">
  <div class="space">
    <div class="c c0" style="--c: #f00;"></div>
    <div class="c c1" style="--c: #f80;"></div>
    <div class="c c2" style="--c: #fa0;"></div>
    <div class="c c3" style="--c: #0c0;"></div>
    <div class="c c4" style="--c: #0c9;"></div>
    <div class="c c5" style="--c: #09c;"></div>
    <div class="c c6" style="--c: #00f;"></div>
    <div class="c c7" style="--c: #80f;"></div>
    <div class="c c8" style="--c: #a0a;"></div>
    <div class="c c9" style="--c: #aaa;"></div>
    <div class="c c10" style="--c: #777;"></div>
    <div class="c c11" style="--c: #333;"></div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    position: absolute;
    top: 200px;
    left: 300px;
    perspective: 5000px;
    perspective-origin: center center;
  }
  .space {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: rotateX(-30deg);
    animation: oxxo 5s infinite linear;
  }
  @keyframes oxxo {
    0% {transform: rotateX(-30deg) rotateY(0deg);}
    100% {transform: rotateX(-30deg) rotateY(360deg);}
  }
  .c {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: #0000;    /* 元素本身透明 */
    border-radius: 50%;   /* 圓角產生圓形，影子才會是圓形 */
    /* 多重陰影 */
    box-shadow: 
      var(--c) 50px 0 0 0,
      var(--c) 46.19px 19.14px 0 0,
      var(--c) 35.36px 35.36px 0 0,
      var(--c) 19.14px 46.19px 0 0,
      var(--c) 0 50px 0 0,
      var(--c) -19.14px 46.19px 0 0,
      var(--c) -35.36px 35.36px 0 0,
      var(--c) -46.19px 19.14px 0 0,
      var(--c) -50px 0 0 0,
      var(--c) -46.19px -19.14px 0 0,
      var(--c) -35.36px -35.36px 0 0,
      var(--c) -19.14px -46.19px 0 0,
      var(--c) 0 -50px 0 0,
      var(--c) 19.14px -46.19px 0 0,
      var(--c) 35.36px -35.36px 0 0,
      var(--c) 46.19px -19.14px 0 0;
    animation: oxxo2 2s infinite linear;
  }
  @keyframes oxxo2 {
    0% {transform: rotateY(var(--deg)) translate(100px,0) rotateZ(0deg);}
    100% {transform: rotateY(var(--deg))  translate(100px,0) rotateZ(-360deg);}
  }
  .c0 {--deg: 0deg;}
  .c1 {--deg: -30deg;}
  .c2 {--deg: -60deg;}
  .c3 {--deg: -90deg;}
  .c4 {--deg: -120deg;}
  .c5 {--deg: -150deg;}
  .c6 {--deg: -180deg;}
  .c7 {--deg: -210deg;}
  .c8 {--deg: -240deg;}
  .c9 {--deg: -270deg;}
  .c10 {--deg: -300deg;}
  .c11 {--deg: -330deg;}
</style>

小結

這個範例使用了許多進階的技巧，包含多重陰影、CSS 動畫讀取 CSS 變數數值、CSS 3D 變形等等，只要將這些技巧互相搭配，就能做出有趣又吸睛的效果喔。

意見回饋

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