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

動くストライプ背景見出し

見出しの背後で斜めのストライプ模様が常時ゆっくりとスライドし続ける演出。スポーツブランドやイベントサイトの区切りセクション見出しに勢いを添えます。

autocss

プレビュー

ソースコード

HTML

<div class="d02-01-37-stage">
          <h4 class="d02-01-37-h">STRIPE MOTION</h4>
        </div>

CSS

.prev.d02-01-37{ background:#111827; }
        .d02-01-37 .d02-01-37-stage{
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          height:160px;
          overflow:hidden;
          background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px);
          background-size:200% 200%;
          animation:d02-01-37-slide 8s linear infinite;
        }
        @keyframes d02-01-37-slide{
          from{ background-position:0 0; }
          to{ background-position:-200px -200px; }
        }
        .d02-01-37 .d02-01-37-h{
          position:relative;
          font-size:28px;
          font-weight:800;
          letter-spacing:.08em;
          color:#f8fafc;
        }

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