Marquee new 跑马灯（Marquee） web
Content that auto-scrolls sideways in an endless loop
横向自动滚动、无限循环的内容
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Edge fade边缘渐隐（Edge fade）
mask-image: linear-gradient(…)“The logos dissolving at both ends of the strip” is the edge fade — a mask, not a painted gradient.
“logo 在条带两端慢慢化掉”就是边缘渐隐 —— 用的是 mask，不是画上去的渐变。
Prompt fragmentPrompt 片段the marquee's edge fade: a mask-image linear-gradient on the strip container so items dissolve at both ends instead of clipping hard
跑马灯的边缘渐隐：在条带容器上加 mask-image linear-gradient，让内容在两端溶掉而不是生硬裁断
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a marquee: an auto-scrolling horizontal strip using a CSS @keyframes translateX(-50%) loop over exactly-duplicated content (never the deprecated <marquee> tag), with edge fade masks, pause on hover via animation-play-state, and a prefers-reduced-motion fallback that stops the motion.
构建一个跑马灯：一条横向自动滚动的条带，用 CSS @keyframes translateX(-50%) 循环，内容恰好复制一份（绝不用废弃的 <marquee> 标签），两端加渐隐遮罩，hover 时用 animation-play-state 暂停，并提供 prefers-reduced-motion 下降级的静止版本。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my marquee (CSS translateX keyframe loop, react-fast-marquee). Rule out: the loop jumping at the seam because the content is not duplicated exactly once and translated by exactly -50%; animating left/width on the main thread instead of transform; hover-pause missing (animation-play-state); motion still running under prefers-reduced-motion; the deprecated <marquee> tag pasted in from an old snippet. The symptom:
调试我的跑马灯（CSS translateX keyframe 循环、react-fast-marquee）。逐项排除：接缝处跳动，因为内容没有恰好复制一份、位移也不是恰好 -50%；在主线程上动画 left/width 而不是 transform；缺了悬停暂停（animation-play-state）；prefers-reduced-motion 下动画还在跑；从老代码片段里粘来了废弃的 <marquee> 标签。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | animation + @keyframes translateX | the modern way: a transform loop over duplicated content现代做法：在复制一份的内容上做 transform 循环 |
| HTML | <marquee> | long deprecated — never ship it, but it named the pattern早已废弃 —— 千万别用，但这个模式因它得名 |
| React | react-fast-marquee | |
| CSS | animation-play-state: paused | hover-pause悬停暂停 |