Library Effects

无限跑马灯

可暂停的无限 Logo 跑马灯，悬停/聚焦时停止。

Logo 带可暂停的无限 Logo 跑马灯，悬停/聚焦时停止。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Saas
Style: Minimal
Tech stack: CSS
Animation: Marquee
Difficulty: Beginner
License: Personal
Access: Free
Creator: Daniel Reed
Views: 701

Marquee
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Build an infinite logo marquee: duplicated track, CSS animation, pause on hover and when any child receives focus. prefers-reduced-motion: show a static wrapped row. Ensure logos have alt text. Avoid layout shift.

Code

<!-- HTML -->
<div class="mq"><div class="track"><span>MOTION</span><span>FORGE</span><span>SCROLL</span><span>MOTION</span><span>FORGE</span><span>SCROLL</span></div></div>

/* CSS */
.mq{overflow:hidden;height:100%;display:flex;align-items:center;background:#050505}.track{display:flex;gap:2rem;white-space:nowrap;animation:mq 14s linear infinite;font:700 clamp(2rem,8vw,4rem)/1 system-ui;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px hsl(105 85% 62%)}.track span{padding-right:2rem}@keyframes mq{to{transform:translateX(-50%)}}

// JS