レトロ・パースグリッド

夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。

#css#animation#retro

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：シンセウェイブ風パースグリッドのライブツアー告知 -->
<section class="sr-stage">
  <!-- ★主役：夕陽＋手前へ流れるパースグリッド -->
  <div class="sr-sky" aria-hidden="true"></div>
  <div class="sr-sun" aria-hidden="true"></div>
  <div class="sr-floor" aria-hidden="true"><div class="sr-grid"></div></div>

  <div class="sr-inner">
    <span class="sr-eyebrow">★ SAKURA NEON TOUR 2026 ★</span>
    <h1 class="sr-title">桜 NIGHT<br>WAVE</h1>
    <p class="sr-tour">TOKYO ・ OSAKA ・ NAGOYA ・ FUKUOKA</p>
    <button class="sr-btn" type="button" id="srBtn">ツアー日程を見る</button>
  </div>
</section>

CSS

/* Sakura：桜ネオンのシンセウェイブ。主役は手前へ流れるパースグリッド */
* { box-sizing: border-box; margin: 0; padding: 0; }

.sr-stage {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
  color: #fff;
}

/* 夕焼け空 */
.sr-sky {
  position: absolute;
  inset: 0 0 45% 0;
  z-index: 0;
  background: linear-gradient(180deg, #2a0b3f 0%, #6a1f6e 45%, #ff6fa8 80%, #ffb37c 100%);
}

/* 沈む太陽（横ストライプで切る） */
.sr-sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 150px;
  height: 150px;
  z-index: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe7a0 0%, #ff8fc4 55%, #ff5ea0 100%);
  box-shadow: 0 0 60px rgba(255,143,196,0.7);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
          mask-image: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
}

/* 地面（パース床） */
.sr-floor {
  position: absolute;
  inset: 55% 0 0 0;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(180deg, #1a0626 0%, #320a3a 100%);
  perspective: 220px;
  perspective-origin: 50% 0%;
}

/* ★主役：手前へ流れるパースグリッド */
.sr-grid {
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 240%;
  background-image:
    linear-gradient(to right, rgba(255,143,196,0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,143,196,0.7) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: rotateX(72deg);
  transform-origin: 50% 0%;
  animation: srScroll 1.6s linear infinite;
}
@keyframes srScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 44px; } /* 1マス分流して継ぎ目なくループ */
}

/* 地平線の発光ライン */
.sr-floor::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: #ff8fc4;
  box-shadow: 0 0 16px 3px rgba(255,143,196,0.9);
  z-index: 1;
}

.sr-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.sr-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffe7a0;
  text-shadow: 0 0 12px rgba(255,180,120,0.8);
}
.sr-title {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff 0%, #ffd1e0 60%, #ff8fc4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(255,143,196,0.5);
}
.sr-tour {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
}
.sr-btn {
  margin-top: 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #2a0b3f;
  background: linear-gradient(135deg, #ffd1e0, #ff9ec6);
  border: none;
  padding: 11px 24px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255,143,196,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sr-btn:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(255,143,196,0.85); }
.sr-btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .sr-grid { animation: none; }
  .sr-btn { transition: none; }
}

JavaScript

// ツアー日程ボタンのトグル表示（CSSグリッドが主役なのでJSは最小限）
(() => {
  const btn = document.getElementById("srBtn");
  if (!btn) return; // null安全

  let open = false;
  const dates = "4/12 東京 ・ 4/19 大阪 ・ 4/26 名古屋 ・ 5/3 福岡";

  btn.addEventListener("click", () => {
    open = !open;
    btn.textContent = open ? dates : "ツアー日程を見る";
  });
})();

実装ガイド

使いどころ

80 年代シンセウェイブ／レトロフューチャー風のデザイン、音楽イベントやゲーム系 LP、ナイトテーマのヒーローに。沈む太陽と奥へ流れるグリッドだけで一気にその世界観を作れます。

実装時の注意点

床は perspective + rotateX(72deg) の 3D 変換でパースを作り、background-position をスクロールさせて手前に流れる錯覚を生みます。3D 変換とアニメーションは GPU 合成に乗りやすく軽量です。地平線側を mask グラデでフェードさせ、空との境目を自然になじませています。CSS のみで JS は不要です。

対応ブラウザ

perspective・rotateX などの 3D transform、repeating-linear-gradient、background-position アニメーションは全モダンブラウザで対応します。地平線フェードと太陽の走査線に使う mask は Safari/一部 Chrome 系で -webkit-mask の併記が必要で、サンプルも両方記述しています。

よくある失敗

mask のプレフィックス併記を忘れると Safari で地平線が直線で切れて不自然になります。グリッドのスクロール量（background-position の移動）と background-size を一致させないとループの継ぎ目が見えます。perspective の値が小さすぎるとパースが急すぎて格子が潰れます。

応用例

グリッド色や空のグラデを変えて昼／夜・別配色のレトロ表現に、太陽の走査線の間隔を変えて雰囲気調整、スクロール速度を上げてスピード感を出すなどのアレンジが可能です。

コード