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

スタッガーリビール

4つの子要素が時間差で順番に現れる演出。WordPressのサービスの流れや特徴リストに使うと、視線を上から順に誘導できます。

autocss

プレビュー

ソースコード

HTML

<div class="list08-01-02 io-reveal">
          <div class="chip08-01-02"><b>01</b><span>ヒアリング</span></div>
          <div class="chip08-01-02"><b>02</b><span>設計・デザイン</span></div>
          <div class="chip08-01-02"><b>03</b><span>実装・構築</span></div>
          <div class="chip08-01-02"><b>04</b><span>公開・運用</span></div>
        </div>

CSS

.d08-01-02{background:#0f172a;}
        .d08-01-02 .list08-01-02{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;}
        .d08-01-02 .chip08-01-02{
          display:flex;align-items:center;gap:12px;padding:12px 16px;
          background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
          border-radius:10px;color:#e2e8f0;font-size:13.5px;
          opacity:0;transform:translateY(20px);
          transition:opacity .55s ease,transform .55s ease;
        }
        .d08-01-02 .chip08-01-02 b{
          font-size:12px;color:#a5b4fc;letter-spacing:.05em;
          background:rgba(99,102,241,.18);padding:3px 8px;border-radius:6px;
        }
        .d08-01-02 .list08-01-02.is-in .chip08-01-02{opacity:1;transform:translateY(0);}
        .d08-01-02 .list08-01-02.is-in .chip08-01-02:nth-child(1){transition-delay:.05s;}
        .d08-01-02 .list08-01-02.is-in .chip08-01-02:nth-child(2){transition-delay:.2s;}
        .d08-01-02 .list08-01-02.is-in .chip08-01-02:nth-child(3){transition-delay:.35s;}
        .d08-01-02 .list08-01-02.is-in .chip08-01-02:nth-child(4){transition-delay:.5s;}

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