You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CSS Marquee滚动效果未达预期 求助技术排查

avatar
云上老周
2026-6-18
解决CSS平滑循环Marquee滚动效果问题

问题说明

  • 需求：用现代CSS实现类似经典<marquee>标签的平滑连续滚动效果，支持文本和图片从左到右循环滚动
  • 异常：滚动不流畅，内容无法按预期无缝循环，不确定是动画关键帧、宽度设置还是其他因素导致

已尝试代码 

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

.iso-marquee {
  padding: 1.4rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.iso-marquee--long {
  display: flex;
  justify-content: start;
  align-items: center;
  animation: iso-marquee 21s linear infinite;
  width: 2300px; /* Replace with your calculated total width */
  clear: both;
  padding-top: 45px;
  padding-bottom: 45px;
  border-bottom: 1px solid #121212;
  border-top: 1px solid #121212;
}

.marquee-container {
  display: flex;
  align-items: center;
  margin-right: 25px;
}

.TEES {
  font-family: 'Poppins', sans-serif;
  font-size: 85px;
  font-weight: 900;
  display: inline-block;
  margin-right: 2rem;
}

.branding {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

@keyframes iso-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .iso-marquee {
    animation: none;
  }
}
</style>

<div class="iso-marquee-linkwrap">
  <div class="iso-marquee--long iso-marquee">
    <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
    <span class="TEES">TEES</span>
    <div class="branding">
      <span>MAKE YOUR</span>
      <span>MARK WITH</span>
      <span>EXCITISM</span>
    </div>
    <div class="marquee-container">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
    <div class="marquee-container">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
  </div>
</div>

预期参考效果 

<style>
.marquee {
  margin: 2rem 0;
  font-size: clamp(4vw, 4rem, 8vw);
  overflow: hidden;
}

.marquee--long {
  font-size: 1.25rem;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  color: #00112C;
  width: var(--tw);
  text-shadow: var(--tw) 0 currentColor,
               calc(var(--tw) * 2) 0 currentColor,
               calc(var(--tw) * 3) 0 currentColor,
               calc(var(--tw) * 4) 0 currentColor;

  will-change: transform;
  animation: marquee var(--ad) linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee div {
    animation: none;
    text-shadow: none;
    width: auto;
    display: block;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
}
</style>
<div class="marquee" style="--tw: 40vw; --ad: 2.5s;">
  <span>Showreel</span>
</div>

修正方案及代码

问题根源

  1. 固定宽度限制：硬编码2300px宽度，导致不同屏幕下滚动逻辑失效
  2. 动画位移错误：translateX(-50%)仅滚动一半距离，内容不足时会出现空白
  3. 容器层级混乱：溢出容器与动画容器合并，样式冲突导致异常
  4. 缺乏性能优化：未添加动画性能提示，导致滚动卡顿

修正后完整代码 

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&family=Roboto:wght@300&display=swap');

/* 外层溢出容器：仅负责隐藏超出视口的内容 */
.iso-marquee {
  overflow: hidden;
  padding: 1.4rem 0;
  border-top: 1px solid #121212;
  border-bottom: 1px solid #121212;
}

/* 内层滚动轨道：承载所有内容并执行动画 */
.iso-marquee__track {
  display: flex;
  align-items: center;
  will-change: transform; /* 告诉浏览器提前优化动画 */
  animation: iso-marquee 20s linear infinite;
}

/* 单个内容单元：统一管理每组重复内容 */
.iso-marquee__item {
  display: flex;
  align-items: center;
  margin-right: 2rem; /* 单元之间的间距 */
}

.TEES {
  font-family: 'Poppins', sans-serif;
  font-size: 85px;
  font-weight: 900;
  margin: 0 2rem;
}

.branding {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* 动画关键帧：滚动整个轨道宽度，实现无缝循环 */
@keyframes iso-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* 无障碍适配：遵循系统减少动画的设置 */
@media (prefers-reduced-motion: reduce) {
  .iso-marquee__track {
    animation: none;
  }
}
</style>

<div class="iso-marquee">
  <div class="iso-marquee__track">
    <!-- 第一组内容 -->
    <div class="iso-marquee__item">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
    <div class="iso-marquee__item">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
    <!-- 第二组完全相同的内容：确保滚动到末尾时无缝衔接 -->
    <div class="iso-marquee__item">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
    <div class="iso-marquee__item">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
  </div>
</div>

核心修正点

  • 拆分溢出容器与滚动轨道，职责更清晰
  • 移除固定宽度，让滚动轨道由内容自然撑开
  • 复制一组内容，配合translateX(-100%)实现无缝循环
  • 添加will-change: transform优化动画流畅度
  • 调整类名结构，提升代码可维护性

内容的提问来源于stack exchange，提问作者user27182926

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.06.18 18:32:02