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

静止プレビュー(GIF風グラデーション)サムネイル

複数カットの連続をグラデーション帯で表現し、ホバー予告動画の代替として静止したまま見せるサムネイルです。軽量表示が必要な一覧に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="thumb">
          <span class="frames"></span>
          <span class="badge">GIF風プレビュー</span>
          <span class="playbtn"><span class="tri"></span></span>
        </div>

CSS

.d07-15-12 .thumb{position:relative;width:240px;height:135px;border-radius:10px;overflow:hidden;background:#1c1c26;}
        .d07-15-12 .frames{position:absolute;inset:0;background:linear-gradient(90deg,#e08a4f 0%,#e08a4f 24%,#4a90c2 25%,#4a90c2 49%,#7bbf7a 50%,#7bbf7a 74%,#c96b9e 75%,#c96b9e 100%);opacity:.85;}
        .d07-15-12 .badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;z-index:2;}
        .d07-15-12 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;z-index:2;}
        .d07-15-12 .tri{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #333;margin-left:3px;}

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