最新
动画Fade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 个框架中级
Loading…
Text whose letters bob up and down in a staggered wave.
<style>
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.35em); } }
.wave-letter { display: inline-block; animation: wave 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wave-letter { animation: none; } }
</style>
<span class="inline-flex text-3xl font-bold text-blue-600 dark:text-blue-400" aria-label="Hello">
<span class="wave-letter" style="animation-delay: 0ms;">H</span>
<span class="wave-letter" style="animation-delay: 80ms;">e</span>
<span class="wave-letter" style="animation-delay: 160ms;">l</span>
<span class="wave-letter" style="animation-delay: 240ms;">l</span>
<span class="wave-letter" style="animation-delay: 320ms;">o</span>
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
text必填 | string | - | 按下按钮时写入剪贴板的字符串。 |
className | string | '' | 合并到根元素上的额外类名。 |
Each letter animates on an offset delay for the wave. Reduced motion holds every letter still.