新着
アニメーションFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 個のフレームワーク中級
Loading…
An expanding ring that pulses behind any element to draw the eye.
<style>
@keyframes pulse-ring {
0% { transform: scale(0.9); opacity: 0.7; }
70%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pulse-ring { animation: none; opacity: 0; }
}
</style>
<span class="relative inline-flex">
<span class="pulse-ring absolute inset-0 rounded-full bg-blue-500/50" style="animation: pulse-ring 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;" aria-hidden="true"></span>
<span class="relative inline-flex items-center rounded-full bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white">New feature</span>
</span>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children必須 | ReactNode | - | コンポーネントの内部にレンダリングされるコンテンツ。 |
className | string | '' | ルート要素にマージされる追加クラス。 |
Wrap a badge, dot or button and recolor the ring. The pulse is transform/opacity only and disappears under reduced motion.