无限跑马灯轮播

这是一种无限滚动动画，通常用于循环显示合作伙伴公司徽标列表。

预览

LOGO 1LOGO 2LOGO 3LOGO 4LOGO 5

用例和功能

公共关系：通过不间断地显示赞助商和合作伙伴公司徽标列表来显示您的可信度。
视觉生动性：以文本形式滚动活动信息和新信息以吸引用户的注意力。
无限循环：复制和定位内容，并使用 CSS 动画无缝循环，给人一种永远滚动的错觉。

设计和用户体验（Design & UX）的要点

平滑滚动：通过使用 CSS animation，滚动更加平滑，并且比 JavaScript 具有更好的性能。
悬停时暂停：如果用户想要仔细查看内容，动画会在鼠标悬停时暂停（“动画播放状态：暂停”）。

如何定制（定制指南）

调整速度：您可以通过增加或减少CSS“动画：选取框20秒线性无限;”中的“20秒”来改变滚动速度。
更改内容：您可以自由更改徽标和文本元素。确保两套（原件和副本）的内容相同。

实现代码（Implementation）

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">

<style>
@keyframes marquee {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

  }

  .animate-marquee {

    animation: marquee 20s linear infinite;

  }

  .animate-marquee:hover {

    animation-play-state: paused;

  }

</style>

<div class="flex w-[200%] animate-marquee gap-8 items-center">

  <!-- First set -->

  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">

    <span>LOGO 1</span>

    <span>LOGO 2</span>

    <span>LOGO 3</span>

    <span>LOGO 4</span>

    <span>LOGO 5</span>

  </div>

  <!-- Duplicate set for infinite effect -->

  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">

    <span>LOGO 1</span>

    <span>LOGO 2</span>

    <span>LOGO 3</span>

    <span>LOGO 4</span>

    <span>LOGO 5</span>

  </div>

</div>

</div>