パーツ番号 02-01-28 ・ CSSのみ

グリッドスキャン見出し

見出しの背景で格子状のグリッド線が絶えずスキャンするように流れる演出。IT・SaaS・テクノロジー系サイトのヒーロー見出しに近未来的な印象を与えます。

autocss

プレビュー

ソースコード

HTML

<div class="d02-01-28-stage">
          <h4 class="d02-01-28-h">NEXT GENERATION</h4>
        </div>

CSS

.prev.d02-01-28{ background:#0a0e1a; }
        .d02-01-28 .d02-01-28-stage{
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          height:160px;
          overflow:hidden;
          background-image:
            linear-gradient(rgba(56,189,248,.25) 1px, transparent 1px),
            linear-gradient(90deg, rgba(56,189,248,.25) 1px, transparent 1px);
          background-size:24px 24px;
          animation:d02-01-28-scan 6s linear infinite;
        }
        @keyframes d02-01-28-scan{
          from{ background-position:0 0, 0 0; }
          to{ background-position:0 240px, 240px 0; }
        }
        .d02-01-28 .d02-01-28-h{
          position:relative;
          z-index:1;
          font-size:26px;
          font-weight:800;
          letter-spacing:.08em;
          color:#e0f2fe;
          background:#0a0e1a;
          padding:6px 18px;
        }

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