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

チェックマーク描画リスト

リストの各項目にチェックマークが順番に描き込まれていきます。WordPressのサービス特徴一覧や選ばれる理由セクションで信頼感を演出できます。

css

プレビュー

ソースコード

HTML

<ul class="d02-15-07-list">
          <li><svg viewBox="0 0 24 24" class="d02-15-07-check" aria-hidden="true"><path d="M4,13 L10,19 L21,5" fill="none"/></svg><span>初回相談 無料</span></li>
          <li><svg viewBox="0 0 24 24" class="d02-15-07-check" aria-hidden="true"><path d="M4,13 L10,19 L21,5" fill="none"/></svg><span>最短即日対応</span></li>
          <li><svg viewBox="0 0 24 24" class="d02-15-07-check" aria-hidden="true"><path d="M4,13 L10,19 L21,5" fill="none"/></svg><span>全国どこでも</span></li>
        </ul>

CSS

.d02-15-07{background:#fff}
        .d02-15-07-list{list-style:none;margin:0;padding:0;font-size:14px;font-weight:700;color:#1f2937}
        .d02-15-07-list li{display:flex;align-items:center;gap:8px;margin:8px 0}
        .d02-15-07-check{width:20px;height:20px;flex:none;overflow:visible}
        .d02-15-07-check path{stroke:#16a34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:34;stroke-dashoffset:34}
        .d02-15-07.is-in .d02-15-07-list li:nth-child(1) .d02-15-07-check path{animation:d1807draw .5s ease-out .1s forwards}
        .d02-15-07.is-in .d02-15-07-list li:nth-child(2) .d02-15-07-check path{animation:d1807draw .5s ease-out .5s forwards}
        .d02-15-07.is-in .d02-15-07-list li:nth-child(3) .d02-15-07-check path{animation:d1807draw .5s ease-out .9s forwards}
        @keyframes d1807draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-07-check path{animation:none!important;stroke-dashoffset:0}}

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