パーツ番号 08-03-09 ・ CSSのみ

アイコンリスト順次ポップ

各行にホバーするとアイコンが拡大し、色が付いて横にスライドします。WordPressの特徴・メリット一覧を軽快に見せられます。

hovercss

プレビュー

ソースコード

HTML

<ul class="d08-03-09-list">
          <li><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M12 2l2.4 6.9H22l-5.8 4.3 2.2 7L12 16l-6.4 4.2 2.2-7L2 8.9h7.6z"/></svg><span>高速表示</span></li>
          <li><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14l-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9z"/></svg><span>安全な設計</span></li>
          <li><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg><span>手軽に導入</span></li>
        </ul>

CSS

.d08-03-09-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;width:100%;max-width:220px}
        .d08-03-09-list li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:#555;padding:8px 12px;border-radius:10px;cursor:default;transition:background .25s,transform .25s,color .25s}
        .d08-03-09-list li svg{color:#c4c8d4;transition:transform .3s cubic-bezier(.2,1.4,.4,1),color .25s}
        .d08-03-09-list li:hover{background:#f1efff;color:#2a2d3a;transform:translateX(6px)}
        .d08-03-09-list li:hover svg{color:#6a5cff;transform:scale(1.35) rotate(-8deg)}

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