パーツ番号 10-03-06 ・ CSSのみ
ストーリーズ風サムネ列
グラデ枠の丸アバターを横並びにし、未読はリングがゆっくり回転。WordPressの新着情報やスタッフ紹介の導線に。
プレビュー
ソースコード
HTML
<div class="d10-03-06-row">
<div class="d10-03-06-item"><span class="d10-03-06-ring d10-03-06-unread"><span class="d10-03-06-av" style="--g1:#f6a6ff;--g2:#ff8b8b">M</span></span><span class="d10-03-06-nm">Mika</span></div>
<div class="d10-03-06-item"><span class="d10-03-06-ring d10-03-06-unread"><span class="d10-03-06-av" style="--g1:#a1c4fd;--g2:#c2e9fb">R</span></span><span class="d10-03-06-nm">Ren</span></div>
<div class="d10-03-06-item"><span class="d10-03-06-ring d10-03-06-unread"><span class="d10-03-06-av" style="--g1:#84fab0;--g2:#8fd3f4">Y</span></span><span class="d10-03-06-nm">Yuki</span></div>
<div class="d10-03-06-item"><span class="d10-03-06-ring d10-03-06-read"><span class="d10-03-06-av" style="--g1:#d4d7dd;--g2:#b8bcc4">S</span></span><span class="d10-03-06-nm">Sora</span></div>
</div>CSS
.d10-03-06 .d10-03-06-row{width:240px;display:flex;gap:12px;justify-content:center}
.d10-03-06 .d10-03-06-item{display:flex;flex-direction:column;align-items:center;gap:5px}
.d10-03-06 .d10-03-06-ring{width:52px;height:52px;border-radius:50%;padding:3px;display:flex;align-items:center;justify-content:center;position:relative}
.d10-03-06 .d10-03-06-unread{background:conic-gradient(#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433);animation:d276spin 4s linear infinite}
.d10-03-06 .d10-03-06-read{background:#e2e5ea}
.d10-03-06 .d10-03-06-av{width:44px;height:44px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;background:linear-gradient(135deg,var(--g1),var(--g2))}
.d10-03-06 .d10-03-06-nm{font-size:11px;color:#555}
@keyframes d276spin{to{transform:rotate(360deg)}}クラス名 .d10-03-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。