パーツ番号 07-12-03 ・ CSSのみ

シークバー風波形プレイヘッド演出

静止した波形の上を再生ヘッドの縦線が自動で往復移動する、シーク操作を想起させる演出です。ポッドキャストや音声コンテンツの視聴イメージ画像に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="seekwrap07-12-03">
          <div class="wave07-12-03">
            <span style="--h:30%"></span><span style="--h:55%"></span><span style="--h:80%"></span><span style="--h:40%"></span>
            <span style="--h:65%"></span><span style="--h:90%"></span><span style="--h:35%"></span><span style="--h:60%"></span>
            <span style="--h:45%"></span><span style="--h:75%"></span><span style="--h:50%"></span><span style="--h:85%"></span>
            <span style="--h:40%"></span><span style="--h:60%"></span><span style="--h:30%"></span><span style="--h:70%"></span>
            <span style="--h:48%"></span><span style="--h:78%"></span><span style="--h:33%"></span><span style="--h:58%"></span>
          </div>
          <div class="head07-12-03"></div>
        </div>

CSS

.d07-12-03 .seekwrap07-12-03{ position:relative; width:88%; max-width:280px; height:80px; }
        .d07-12-03 .wave07-12-03{ position:absolute; inset:0; display:flex; align-items:center; gap:3px; }
        .d07-12-03 .wave07-12-03 span{ flex:1; height:var(--h); background:#dbe2ea; border-radius:2px; }
        .d07-12-03 .head07-12-03{ position:absolute; top:0; left:0; width:2px; height:100%; background:#2563eb; box-shadow:0 0 6px rgba(37,99,235,.6); animation:head1353move 4s ease-in-out infinite alternate; }
        @keyframes head1353move{
          0%{ left:0%; }
          100%{ left:100%; }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-03 .head07-12-03{ animation:none; left:35%; }
        }

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