パーツ番号 07-02-10 ・ CSSのみ

グリッド線パースペクティブ(レトロ)

遠近感のあるグリッド床が奥へ流れ続けるシンセウェーブ風の背景です。WordPressのレトロ・80年代テイストのヒーローやイベントページに映えます。

autocssdark

プレビュー

ソースコード

HTML

<span class="d07-02-10-floor"></span>
        <span class="d07-02-10-label">背景サンプル</span>

CSS

.d07-02-10{padding:0;background:linear-gradient(#1a0838 0%,#3a0d55 55%,#5a1145 100%);perspective:200px}
        .d07-02-10-label{position:relative;z-index:2;color:#ff5cf0;font-weight:700;letter-spacing:.08em;font-size:15px;text-shadow:0 0 12px rgba(255,92,240,.7)}
        .d07-02-10-floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;
          transform:rotateX(72deg);transform-origin:bottom center;
          background-image:
            linear-gradient(rgba(120,255,235,.55) 2px,transparent 2px),
            linear-gradient(90deg,rgba(120,255,235,.55) 2px,transparent 2px);
          background-size:40px 40px;animation:d170run 1.2s linear infinite}
        @keyframes d170run{0%{background-position:0 0,0 0}100%{background-position:0 40px,0 0}}

クラス名 .d07-02-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。