AnimatedText 组件

渐变动画文字组件，提供彩虹渐变文字效果。

功能概述

• 渐变动画: 彩虹色渐变背景动画
• 文字裁剪: 使用背景裁剪实现渐变文字
• 自定义样式: 支持额外的 className

Props 接口

interface AnimatedTextProps {
  children: React.ReactNode;  // 文字内容
  className?: string;         // 额外的 CSS 类
}

动画效果

• 渐变颜色: 蓝色 → 青色 → 绿色 → 橙色 → 红色 → 蓝色
• 动画时长: 通过 CSS 类 animate-gradient-text 控制
• 背景尺寸: 300% x 100%，实现流动效果

CSS 实现

/* 核心样式 */
background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981, #f97316, #ef4444, #3b82f6);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

使用示例

import { AnimatedText } from "@/components/layout/animated-text";

<AnimatedText>
  渐变动画文字
</AnimatedText>

<AnimatedText className="text-4xl font-bold">
  大号加粗渐变文字
</AnimatedText>

样式说明

• 内边距: 0.25em 0.15em
• 负边距补偿: -0.25em -0.15em
• 防止溢出: overflow-visible
• 内联块显示: inline-block

注意事项

• 需要配合全局 CSS 动画 animate-gradient-text 使用
• 仅支持文字内容（或可以应用文字样式的内容）
• 在深色和浅色模式下效果一致