在 Webflow 中实现悬停暂停的无限横向滚动

实现步骤

1. 元素结构

确保元素结构如下：

2. 配置 CSS 变量

在 Webflow Designer 中配置 CSS 变量。

1. 给 Section 元素设置 overflow: hidden 和 width: 100vw。
2. 给 Wrapper 元素设置 display: flex 和 justify-content: flex-start。
3. 给 List 元素设置 flex-shrink: 0，并按需要调整布局。

3. 设置 Item 元素样式

4. 添加自定义 CSS 代码

在 body 标签之前或 section 元素之前添加以下自定义 CSS 代码，即可在 Webflow 中实现无限横向滚动效果：

<style>
  .list {
    will-change: transform;
    animation: list-horizontal-scroll 20s linear infinite;
  }
  @keyframes list-horizontal-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - 32px));
    }
  }
  .wrapper:hover .list {
    animation-play-state: paused;
  }
</style>

按需要调整类名 list、list-horizontal-scroll 和 wrapper。把 transform: translateX(calc(-100% - 32px)); 中的 32px 改成与你的列表间距一致的值。

5. 延长 List 元素

如果你的 List 元素太短、无法铺满屏幕，可以多复制几份来填满屏幕。