精选最新
跑马灯Logos Marquee Strip
An endless horizontal strip of wordmarks that loops seamlessly for social proof.
#marquee#logos#infinite-scroll
3 个框架初级
Loading…
Bold phrases that slide past with a dot between each, like a headline ticker.
<style>
@keyframes marquee-ticker-scroll {
to { transform: translateX(-50%); }
}
</style>
<section class="w-full overflow-hidden py-4" aria-label="Product highlights">
<div class="flex w-max animate-[marquee-ticker-scroll_24s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
<div class="flex shrink-0 items-center motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-2">
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Ship in minutes</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Zero config</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Type-safe by default</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Scales to zero</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
</span>
</div>
<div class="flex shrink-0 items-center motion-reduce:hidden" aria-hidden="true">
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Ship in minutes</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Zero config</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Type-safe by default</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400"></span>
</span>
<span class="inline-flex shrink-0 items-center gap-6 pr-6">
<span class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Scales to zero</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400"></span>
</span>
</div>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | string[] | 6 sample phrases | 要渲染的项目数组。 |
durationSeconds | number | 24 | Duration seconds |
className | string | - | 合并到根元素上的额外类名。 |
The dot is a trailing decoration on every item, so it appears at the seam too with no special-casing. Feed `items` your own phrases and raise `durationSeconds` to slow it down.