SuperAPI AI 工具集

gradient-text

前端与建站

查看项目

更新于 10-16 01:36

技能介绍

用途:为单个英雄词、短标题、品牌名或关键指标提供低调的高级强调效果,让缓慢的品牌渐变在文字中漂移。属于 motion-anything 项目,遵循 MOTION-SPEC.md,由 Magic UI 推广的技术以无依赖的纯 CSS 重新实现。

主要能力:纯 CSS 实现,可在任意框架中使用;通过 --g1/--g2/--g3 设置品牌颜色,可调整时长(默认 6s);动画作用于文字裁剪渐变的 background-position,对 GPU 友好。

使用方式:将 gradient-text.css 复制到项目中并链接;用 span 包裹短语,例如 <h1><span class="gradient-text">motion, anything</span></h1>;设置品牌颜色变量并调整时长。

适用场景:每个视图仅限一个短语,适合英雄词、短标题、品牌名或关键指标。

限制:不适用于正文或长文本,会损害可读性与对比度;在需要保证颜色对比度以满足无障碍要求时不适用。在 prefers-reduced-motion 下漂移停止,文字以纯色 --g1 渲染,因此需保持基础 --g1 可读作为降级回退。