文字渐变流动

{
  "slug": "text-gradient-flow",
  "name": "文字渐变流动",
  "nameEn": "Text Gradient Flow",
  "description": "文字颜色以渐变方式持续流动变化，吸引注意力的标题效果。",
  "descriptionEn": "Text color flows continuously through a gradient, creating an eye-catching headline effect.",
  "category": "text",
  "tags": [
    "text",
    "gradient",
    "flow",
    "color",
    "continuous"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "3s",
  "easing": "linear",
  "cssProperties": [
    "background-position"
  ],
  "isGPUAccelerated": false,
  "previewBg": "dark",
  "keywords": [
    "text gradient",
    "gradient flow",
    "animated text",
    "color shift",
    "headline"
  ],
  "useCases": [
    "Hero headline emphasis",
    "Brand tagline animation",
    "Section title highlight",
    "Special offer text"
  ],
  "relatedAnimations": [
    "typewriter"
  ],
  "recommendedStyles": [
    "vaporwave",
    "modern-gradient",
    "cyberpunk-neon"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes text-gradient-flow {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n.text-gradient-flow {\n  background: linear-gradient(\n    270deg,\n    #6366f1, #ec4899, #8b5cf6, #06b6d4, #6366f1\n  );\n  background-size: 300% 300%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: text-gradient-flow 3s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .text-gradient-flow {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes text-gradient-flow {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n@utility animate-text-gradient-flow {\n  background: linear-gradient(\n    270deg,\n    #6366f1, #ec4899, #8b5cf6, #06b6d4, #6366f1\n  );\n  background-size: 300% 300%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: text-gradient-flow 3s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .text-gradient-flow {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: disable for users who prefer reduced motion\n// import { useReducedMotion } from \"framer-motion\";\n// const reduced = useReducedMotion();\n// if (reduced) return <div className=\"static-fallback\" />;\n\n<motion.h1\n  animate={{ backgroundPosition: [\"0% 50%\", \"100% 50%\", \"0% 50%\"] }}\n  transition={{ duration: 3, repeat: Infinity, ease: \"linear\" }}\n  style={{\n    background: \"linear-gradient(270deg, #6366f1, #ec4899, #8b5cf6, #06b6d4, #6366f1)\",\n    backgroundSize: \"300% 300%\",\n    WebkitBackgroundClip: \"text\",\n    WebkitTextFillColor: \"transparent\",\n  }}\n>\n  Gradient Text\n</motion.h1>"
    }
  ]
}