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

テキストマーキー

帯状のテキストが無限ループで流れる演出。セクションの区切りやフッター上の装飾として、サイトに動きとリズムを加えます。

autocss

プレビュー

ソースコード

HTML

<div class="d02-01-10-marquee" aria-hidden="true">
          <div class="d02-01-10-track">
            <span>WORDPRESS DESIGN ✕ ANIMATION&nbsp;—&nbsp;</span><span>WORDPRESS DESIGN ✕ ANIMATION&nbsp;—&nbsp;</span>
          </div>
        </div>

CSS

.prev.d02-01-10{ background:#111827; padding:24px 0; }
        .d02-01-10 .d02-01-10-marquee{
          width:100%;
          overflow:hidden;
          border-top:1px solid rgba(255,255,255,.15);
          border-bottom:1px solid rgba(255,255,255,.15);
          padding:14px 0;
        }
        .d02-01-10 .d02-01-10-track{
          display:flex;
          width:max-content;
          animation:d02-01-10-scroll 14s linear infinite;
        }
        .d02-01-10 .d02-01-10-track span{
          flex:none;
          font-size:28px;
          font-weight:800;
          letter-spacing:.1em;
          color:transparent;
          -webkit-text-stroke:1px #93c5fd;
          white-space:nowrap;
        }
        @keyframes d02-01-10-scroll{
          from{ transform:translateX(0); }
          to{ transform:translateX(-50%); }
        }

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