नया
एनिमेशन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.