可行但需遵守三条铁律：无交互、无暂停、尺寸强约束；marquee已废弃且不可访问；CSS轮播须动态设容器宽度、统一logo尺寸、加will-change优化性能。
纯 CSS 实现合作品牌 Logo 滚动展示，可行，但必须接受「无交互、无暂停、尺寸强约束」这三条铁律。一旦你希望点击切换、鼠标悬停暂停、或适配不同屏幕下 logo 数量变化，就得上 JavaScript。
为什么 marquee 不能用
<marquee></marquee> 在 Chrome 120+ 和 Firefox 中已被移除渲染逻辑，Edge 仅保留兼容模式且会触发 console.warn；它不支持控制速度粒度、无法设置 easing、也不能响应视口变化。更关键的是：所有现代 SEO 工具和无障碍检测器（如 axe、Lighthouse）都会把它标为「过时且不可访问」。别试了，直接删掉。
CSS 动画轮播必须设对容器总宽度
常见错误是把 .logo-carousel 写死 width: 100%，然后堆一堆 <img alt="HTML怎么做合作品牌区_HTML合作品牌logo滚动展示【从零开始】" > 进去——结果动画位移失效、末尾留白、或者首尾跳变。正确做法是：
- 每个
<img alt="HTML怎么做合作品牌区_HTML合作品牌logo滚动展示【从零开始】" >必须包在独立<div> 里（不是直接兄弟） <li> <code>.logo-carousel的总宽度 =window.innerWidth × logo数量（JS 动态注入，CSS 不写死） - 每个子
<div> 设 <code>flex: 0 0 100%，确保占满一屏宽度 - 动画用
@keyframes驱动transform: translateX()，起止值分别为0和-100% - 所有
<img alt="HTML怎么做合作品牌区_HTML合作品牌logo滚动展示【从零开始】" >外层<div> 设固定高度（如 <code>height: 60px） -
<img alt="HTML怎么做合作品牌区_HTML合作品牌logo滚动展示【从零开始】" >自身设height: 100%; width: auto; object-fit: contain; - 避免用
vertical-align: middle，改用display: flex; align-items: center; - 如果要兼容 Safari 14 及更早版本，
object-fit需加-webkit-前缀 - 只加在
.logo-carousel容器上，不要加在每个<img alt="HTML怎么做合作品牌区_HTML合作品牌logo滚动展示【从零开始】" >上 - 动画结束前不要移除，否则可能闪帧
- 如果轮播区域在折叠面板里（比如 tab 切换后才显示），需在显示后手动触发一次
getComputedStyle强制重绘 - Chrome DevTools 的 Rendering 面板里勾选 “Paint flashing”，可验证是否真有重绘优化生效
Logo 尺寸不统一？object-fit: contain 是底线
不同合作方给的 logo 像素尺寸、宽高比、背景色千差万别。如果只设 max-width: 200px 而不加约束，小图会被拉伸、大图会溢出、透明底和白底混排时视觉跳跃明显。必须：
立即学习“前端免费学习笔记（深入）”；
移动端滑动卡顿？will-change: transform 得加在容器上
iOS Safari 和部分安卓 WebView 对频繁重绘敏感，尤其当页面还有其他动画时。只靠 transform 不够，得提前告诉浏览器：“这个元素要动”。但注意：
最易被忽略的点：动画时长必须和 logo 数量反向匹配。5 个 logo，总动画时长设 25s，才能保证每个停留 5s；若设成 10s，就会加速滚动、用户根本看不清文字。别依赖“看起来差不多”，拿秒表实测两遍。
