模式 · 来自长文发布

庆祝

会员开通、第一次写入这类时刻：画一个圈打勾、字依次升起、彩纸从勾那里散开；减少动效时直接给最终状态。

演示

会员已开通

有效期至 2027年11月8日

<div class="xxd-celebrate" id="cele">
  <svg class="xxd-celebrate__ring" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="miter"><circle cx="12" cy="12" r="9.5" pathLength="1"/><path d="m7.5 12 3 3 6-6" pathLength="1"/></svg>
  <p class="xxd-text" data-variant="heading2">会员已开通</p>
  <p class="xxd-text" data-variant="caption">有效期至 2027年11月8日</p>
  <button class="xxd-btn" data-variant="primary" onclick="Xxd.celebrate(this.closest('.xxd-celebrate').querySelector('svg'))">开始写作</button>
</div>

规则

只在真正值得的时刻；一次
只动 opacity / transform；减少动效时不放彩纸

JS

Xxd.celebrate(anchorElement)