【CSS】【offset-path】CSSで宇宙を作る

はじめに

今回は、CSSで宇宙を作ります ↓

See the Pen space-rocket by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

背景を作る

宇宙なので、ダークな背景に星を瞬かせたいと思います。

See the Pen space-background by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

背景のグラデーションは、暗いネイビーから黒っぽい色に広がる放射状のグラデーションです。

.universe {
  background: radial-gradient(circle at center, #1b2735 0%, #050508 100%);
}

星の用意はJSでしています。

const universe = document.querySelector('.universe');
  for (let i = 0; i < 150; i++) {
  // 以下の処理を150回実行する
    // 星の要素を作る
    const star = document.createElement('div');
    star.className = 'star';
    // 画面の幅・高さに対してランダムな位置を決める（Math.random()：0以上1未満のランダムな数字を生成）
    star.style.left = Math.random() * 100 + 'vw';
    star.style.top = Math.random() * 100 + 'vh';
    // アニメーションのタイミングをずらす（ランダムに待ち時間を与えている）
    star.style.animationDelay = Math.random() * 2 + 's';
    // 親要素の中に追加する
    universe.appendChild(star);
  }

CSSで星の見た目とアニメーションの定義を決めています。

.star {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: white;
  border-radius: 50%;
  /*twinkleというアニメーションを2秒かけて無限に行ったり来たりする*/
  animation: twinkle 2s infinite alternate;
}

alternateによって、暗→明→ （明→暗に逆再生） →暗→明 となる
アニメーションがパッと切り替わるというより、じわ〜とした印象になる

アニメーションは以下のように定義しています。

@keyframes twinkle {
  /* アニメーション開始時の状態（少し透明）*/
  from { opacity: 0.2; transform: scale(1); }
  /* アニメーション終了時の状態（はっきり見える＋スケールが大きく）*/
  to { opacity: 1; transform: scale(1.2); }
}

流れ星を流れさせる

See the Pen space-meteor by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

流れ星のスタイルとアニメーションは以下のように指定されています。

.shooting-star {
    position: absolute;
    /* 流れ星の見た目（細長い長方形＋後ろにかけて透明になるグラデーション） */
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, white, transparent);
    /* 軌道の設定 */
    offset-path: path("M300,-300 L-500,500");
    /* shootというアニメーションを5秒かけて無限に繰り返す*/
    animation: shoot 5s infinite;
}

---

offset-pathとは？

• パス状に要素を配置・移動させるCSSのプロパティ
• 要素がたどる経路は path()関数を使って定義する
  • IllustratorやSVG Editorで作成したパスから値を取得して指定することもできる

path()関数

• 直線や曲線・ベクトル化された線を定義する関数

先ほどの例：offset-path: path("M300,-300 L-500,500");（原点は親要素の左上）

• M300,-300：描き始めの点（M: Move to）
  • M X座標（右に行くほど＋）,Y座標（下に行くほど＋）
  • 原点より300px右で、300px上の座標（画面外の右上）
• L-500,500：直線を引く（L: Line to）
  • 原点より500px左で、500px下の座標（画面外の左下）

---

@keyframes shoot {
    0% { offset-distance: 0%; opacity: 0; } /* 0秒：スタート地点（透明で見えない）*/
    5% { opacity: 1; } /* 0.25秒：スタート付近（パッと光る）*/
    20% { offset-distance: 100%; opacity: 0; } /* 1秒：ゴール地点（消える） */
    100% { offset-distance: 100%; opacity: 0; } /* 5秒：5秒までゴール地点で待って、ループスタート */
}

---

offset-distanceとは？

• offset-path上の要素を配置する位置を指定するプロパティ
  • offset-distance: 0%：スタート地点
  • offset-distance: 100%：ゴール地点
• pxでも指定できる

---

惑星を回す

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

惑星のアニメーションとスタイルは以下のように定義されています。

.sun {
  /* 太陽の「左上の角」を画面の中央に指定 */
  position: absolute;
  top: 50%; left: 50%;
  /* 少し右下にずれているのを、左上に移動させて、太陽の中心が画面の真ん中になる */
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  background: radial-gradient(circle, #ffcc00, #ff4400);
  border-radius: 50%;
  box-shadow: 0 0 40px orange;
  z-index: 10;
}

.planet {
  width: 25px; height: 25px;
  background: radial-gradient(circle at 30% 30%, #4da6ff, #003366);
  border-radius: 50%;
  /* 中心から半径180pxの円を周回させる */
  offset-path: circle(180px at center);
  /* orbit というアニメーションを一定のスピードで10秒かける、ループ */
  animation: orbit 10s linear infinite;
  z-index: 10;
}

offset-pathは、基本図形関数もパスとして指定できる

アニメーションは以下のように定義されています。

/* アニメーション開始時はスタート地点、終了時はゴール地点を指定して、planetが1周する*/
@keyframes orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

ロケットを飛ばす

See the Pen space-rocket by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

.rocket {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));     
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.5rem;
  z-index: 10;  
  offset-path: path("M1 497.632C1 ~~~~~ 1806.23 1"); /* 長いので省略 */  
  /* 絵文字の向きを進行方向に合わせる（30degで補正） */
  offset-rotate: auto 30deg;
  /* fly というアニメーションを、一定のスピード12秒で動く、ループする */
  animation: fly 12s infinite linear;
}

---

offset-rotateとは？

• 要素が offset-path に沿って配置された場合の向き/方向を定義する
  • auto：進行方向に合わせる
  • angle：ずっと指定された角度で動く
  • auto angle：進行方向＋指定した角度分傾ける
  • reverse：進行方向の真後ろを向く

コード例：offset-rotate: auto 30deg;

• auto 30deg
  • 進行方向＋30°傾いて進む

---

アニメーションは以下のように定義しています。

@keyframes fly {
/* アニメーション開始時はスタート地点、終了時はゴール地点を指定している*/
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

おわりに

今回は、offset-pathやoffset-distanceなどを使ったアニメーションで宇宙っぽいアニメーションを作ってみました

パス次第で、いろんな動きが可能なので活用していきたいです

アドカレ2025が開催中！

今年もアドカレ開催中です
最終日まであとちょっと...！！！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考