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

イベントカウントダウン

開催日までの残り日数をバッジで表示(固定値)。リング装飾がゆっくり回転して注目度を高めます。WordPressのイベント・セール告知に。

bookingcss3d

プレビュー

ソースコード

HTML

<div class="d10-02-07-badge">
          <div class="d10-02-07-ring">
            <div class="d10-02-07-num">27</div>
            <div class="d10-02-07-unit">DAYS</div>
          </div>
          <div class="d10-02-07-txt">夏フェス2026<br><b>7月31日</b> 開催</div>
        </div>

CSS

.d10-02-07-badge{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d10-02-07-ring{position:relative;width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#fff 55%,transparent 56%),conic-gradient(#f43f5e 0,#fb7185 120deg,#fda4af 240deg,#f43f5e 360deg);box-shadow:0 6px 18px rgba(244,63,94,.25);animation:d257spin 8s linear infinite}
        .d10-02-07-num{font-size:34px;font-weight:800;color:#f43f5e;line-height:1;animation:d257spin-rev 8s linear infinite}
        .d10-02-07-unit{font-size:11px;letter-spacing:2px;color:#fb7185;font-weight:700;animation:d257spin-rev 8s linear infinite}
        .d10-02-07-txt{text-align:center;font-size:12px;color:#475569;line-height:1.5}
        .d10-02-07-txt b{color:#f43f5e;font-size:14px}
        @keyframes d257spin{to{transform:rotate(360deg)}}
        @keyframes d257spin-rev{to{transform:rotate(-360deg)}}

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