关于 marquee-loop
用于为重复视觉内容设计无缝无限滚动效果的技能，涵盖动画设置、交互选择和减少动态效果的考虑。
主要功能
- 01复制序列实现无缝衔接
- 02线性轨道动画
- 03保持项目宽度稳定
- 04边缘遮罩或渐隐
- 05适配减少动态效果设置
适用场景
- 01循环展示 Logo 条
- 02用跑马灯展示推荐语
- 03滚动展示截图或功能标签
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/marquee-loop确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
demo/index.htmlPROMPT.mdsource.json详细介绍
跑马灯技能
适用场景
- 设计需要为徽标、用户评价、截图、标签或简短的功能标签创建无缝无限循环时。
工作流
- 复制项目序列，使末尾与开头完美衔接。
- 将轨道设置为线性变换动画，从 0 移动到 -50%。
- 保持项目宽度稳定，防止循环时跳动。
- 跑马灯进入或离开某个区域时，对边缘进行遮罩或淡化处理。
- 仅在交互有帮助时，于悬停时暂停或减慢跑马灯。
- 遵循 prefers-reduced-motion 设置，采用静态换行或极慢的移动。
注意事项
- 不要为用户必须仔细阅读的独特内容添加动画。
- 不要在每个移动项目上使用占用大量 CPU 的阴影或滤镜。
评论
支持 Markdown