Orbiting Circles

DEMO

<div class="demo-stage orc-stage">
  <div class="orc-path orc-path-1" aria-hidden="true"></div>
  <div class="orc-path orc-path-2" aria-hidden="true"></div>
  <div class="orc-center">HUB</div>
  <div class="orc-orbit orc-o1"><span class="orc-item">A</span></div>
  <div class="orc-orbit orc-o1 orc-half"><span class="orc-item">B</span></div>
  <div class="orc-orbit orc-o2"><span class="orc-item">C</span></div>
</div>

.orc-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:320px; overflow:hidden; }
.orc-center {
  width:64px; height:64px; border-radius:50%; z-index:1;
  background:#1A1A1A; border:1px solid rgba(233,27,137,.55); color:#fff;
  font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.18em;
  display:flex; align-items:center; justify-content:center;
}
.orc-path { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px dashed rgba(255,255,255,.14); border-radius:50%; }
.orc-path-1 { width:150px; height:150px; }
.orc-path-2 { width:240px; height:240px; }
.orc-orbit { position:absolute; top:50%; left:50%; width:0; height:0; animation: orc-spin 10s linear infinite; }
.orc-o2 { animation-duration:16s; animation-direction:reverse; }
.orc-half { animation-delay:-5s; }
.orc-item {
  position:absolute; left:75px; top:0; width:28px; height:28px; margin:-14px;
  border-radius:50%; background:#15151A; border:1px solid rgba(255,255,255,.25); color:#E91B89;
  font-family:'Oswald',sans-serif; font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
  animation: orc-spin 10s linear infinite reverse;
}
.orc-half .orc-item { animation-delay:-5s; }
.orc-o2 .orc-item { left:120px; animation-duration:16s; animation-direction:normal; }
@keyframes orc-spin { to { transform:rotate(360deg); } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .orc-orbit,
  .orc-o2,
  .orc-half,
  .orc-item,
  .orc-half .orc-item,
  .orc-o2 .orc-item {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

中心のハブ要素の周りを複数のアイコンが円軌道で周回するオービットアニメーションをCSSだけで作って。各アイコンは「大きさ0の回転レール（position:absolute で中心に置いた width:0 の div）」に入れ、レールを animation: rotate(360deg) 無限ループ。アイコン自体は left: 軌道半径px; margin: -サイズ/2 でレールから半径ぶん外側に置くと、レールの回転で円軌道になる。アイコンには同じduration の逆回転（animation-direction や reverse）を掛けて向きを常に正立させる。同一軌道に2個目を置くときは animation-delay: -周期/2 で位相をずらす。軌道の破線円は border: 1px dashed の円 div。外側軌道は duration を長く＋逆方向にすると立体感が出る。連携サービス紹介・技術スタック図に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。