DEMO
METEOR SHOWER
CODE
<div class="demo-stage mts-stage"> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <span class="mts-meteor" aria-hidden="true"></span> <p class="mts-label">METEOR SHOWER</p> </div>
.mts-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:radial-gradient(120% 90% at 50% 0%, #1A1A2E 0%, #0B0B10 60%); min-height:280px; overflow:hidden; }
.mts-meteor {
position:absolute; top:-10%; width:3px; height:3px; border-radius:50%;
background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.45);
transform:rotate(215deg);
animation: mts-fall linear infinite;
}
.mts-meteor::before {
content:''; position:absolute; top:50%; left:0; width:90px; height:1px;
transform:translateY(-50%);
background:linear-gradient(90deg, rgba(255,255,255,.75), transparent);
}
.mts-meteor:nth-child(1) { left:12%; animation-duration:3.2s; animation-delay:0s; }
.mts-meteor:nth-child(2) { left:26%; animation-duration:4.1s; animation-delay:.7s; }
.mts-meteor:nth-child(3) { left:40%; animation-duration:2.8s; animation-delay:1.4s; }
.mts-meteor:nth-child(4) { left:55%; animation-duration:4.6s; animation-delay:.3s; }
.mts-meteor:nth-child(5) { left:68%; animation-duration:3.5s; animation-delay:2.1s; }
.mts-meteor:nth-child(6) { left:82%; animation-duration:3.9s; animation-delay:1.1s; }
.mts-meteor:nth-child(7) { left:94%; animation-duration:4.4s; animation-delay:2.6s; }
@keyframes mts-fall {
0% { transform:rotate(215deg) translateX(0); opacity:0; }
10% { opacity:1; }
100% { transform:rotate(215deg) translateX(420px); opacity:0; }
}
.mts-label { position:relative; font-family:'Oswald',sans-serif; font-size:.95rem; letter-spacing:.32em; color:rgba(255,255,255,.85); }
@media (prefers-reduced-motion: reduce) {
.mts-meteor { animation:none; opacity:.5; }
}
AI PROMPT
斜めに流れ星が降り続ける背景をCSSだけで作って。流れ星1つは「小さな円の点」＋「::before で描いた横長のグラデーションの尾」で構成する。点に transform: rotate(215deg) を掛けると、尾ごと斜めに傾く。アニメーションは同じ rotate を保ったまま translateX を増やすだけ（回転後のローカル座標で移動するので、斜め下方向へ進む）。opacity は 0% で 0、10% で 1、100% で 0 にしてフェードイン・アウトさせる。複数本は :nth-child() で left・animation-duration・animation-delay を1本ずつ変えると、規則性が消えて自然な降り方になる（duration は 2.8s〜4.6s、delay は 0〜2.6s のようにバラす）。要注意: 親に overflow: hidden を必ず指定すること。付け忘れるとページ全体に横スクロールバーが出る。7〜10本程度で十分密度が出るので、本数を増やしすぎないこと。 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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
斜めに走る細い光の筋が繰り返し降り続ける背景演出です。Magic UI の Meteors として知られる表現ですが、仕組みは「点＋グラデーションの尾を回転させ、回転後の軸方向へ移動させる」だけなので、ライブラリなしのCSSで再現できます。暗い背景のヒーローセクションに奥行きを足したいときの定番です。
当サイトの Particle Field は粒子が漂う静かな表現、Floating Shapes Background は大きな図形がゆっくり浮遊する表現です。本ページは「速く走る直線的な軌跡」を主役にした別テーマで、動きの向きと速度感がはっきりしている点が異なります。夜空・宇宙・スピード感を出したいテーマに向きます。
実装上の注意は overflow: hidden の付け忘れによる横スクロールの発生と、本数の入れすぎによる負荷です。7〜10本を duration と delay でばらすのが最も費用対効果の高い設定です。
メテオ背景は何本くらい置くのが適切ですか？
7〜10本で十分に密度が出ます。それぞれ animation-duration と animation-delay を変えるだけで規則性が消えるため、本数よりばらつきの方が効きます。本数を増やすと常時アニメーションする要素が増え、低スペック端末でのバッテリー消費とスクロール性能に影響します。
横スクロールバーが出てしまいます。
流れ星は親の外側まで移動するため、親要素に overflow: hidden が必要です。これを付け忘れると要素がページ幅を押し広げ、横スクロールバーが発生します。背景として全画面に敷く場合は、ラッパーに position: relative と overflow: hidden、そして z-index の管理（コンテンツ側を上に）を忘れないでください。
コードは無料で使えますか？
はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。