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 变形等等，只要将这些技巧互相搭配，就能做出有趣又吸睛的效果喔。

意见反馈