Retro Grid Background

DEMO

CODE

<div class="demo-stage rgb-stage">
  <div class="rgb-grid" aria-hidden="true"></div>
  <p class="rgb-label">RETRO GRID</p>
</div>

.rgb-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; background:linear-gradient(180deg, #0F0F12 0%, #1A1022 55%, #0F0F12 100%); overflow:hidden; perspective:220px; }
.rgb-grid {
  position:absolute; left:-50%; right:-50%; top:52%; bottom:-45%;
  transform:rotateX(62deg); transform-origin:top center;
  background-image:
    linear-gradient(rgba(233,27,137,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,27,137,.45) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 32%);
  mask-image:linear-gradient(180deg, transparent, #000 32%);
  animation: rgb-flow 1.6s linear infinite;
}
@keyframes rgb-flow { from { background-position-y:0; } to { background-position-y:44px; } }
.rgb-label { position:relative; font-family:'Oswald',sans-serif; font-size:1.3rem; letter-spacing:.3em; color:#fff; margin:0; text-shadow:0 0 24px rgba(233,27,137,.6); }

AI PROMPT

地平線に向かって無限に流れるパースペクティブグリッド（シンセウェイブ調のレトロ背景）をCSSだけで作って。親要素に perspective: 220px と overflow: hidden。グリッド要素は縦横2本の linear-gradient（1pxの線＋透明）を background-size: 44px 44px で敷き詰め、transform: rotateX(62deg); transform-origin: top center で床に倒す。左右は left/right: -50% まで広げて回転時の欠けを防ぐ。animation で background-position-y を 0→44px（1グリッドぶん）ループさせると継ぎ目なく無限に流れる。地平線側は mask-image: linear-gradient(180deg, transparent, #000 32%) でフェードアウト。中央テキストには text-shadow のネオングローを。80s調LP・ゲーム系サイト・イベント告知の背景に。

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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。