最新
动画Fade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 个框架中级
Loading…
An SVG success checkmark whose circle and tick draw themselves in.
<style>
@keyframes draw { to { stroke-dashoffset: 0; } }
.check-circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 600ms ease-out forwards; }
.check-mark { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 300ms ease-out 520ms forwards; }
@media (prefers-reduced-motion: reduce) {
.check-circle, .check-mark { animation: none; stroke-dashoffset: 0; }
}
</style>
<div class="flex flex-col items-center gap-3 text-green-500 dark:text-green-400" role="img" aria-label="Success">
<svg width="96" height="96" viewBox="0 0 52 52" fill="none" aria-hidden="true">
<circle class="check-circle" cx="26" cy="26" r="24" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
<path class="check-mark" d="M15 27 l7 7 l15 -15" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Success</span>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | number | 96 | Size |
label | string | 'Success' | 加载时朗读的无障碍标签。 |
className | string | '' | 合并到根元素上的额外类名。 |
Set `size` and `label` for the accessible name. The stroke draws via dashoffset; reduced motion shows the completed mark.