背景渐变流动

{
  "slug": "background-gradient-shift",
  "name": "背景渐变流动",
  "nameEn": "Background Gradient Shift",
  "description": "背景渐变颜色持续缓慢流动变化，营造动态氛围感。",
  "descriptionEn": "Background gradient colors shift slowly and continuously, creating a dynamic ambient atmosphere.",
  "category": "background",
  "tags": [
    "background",
    "gradient",
    "ambient",
    "continuous"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "8s",
  "easing": "linear",
  "cssProperties": [
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "dark",
  "keywords": [
    "background",
    "gradient",
    "shift",
    "ambient",
    "flow",
    "color change"
  ],
  "useCases": [
    "Hero section background",
    "Landing page atmosphere",
    "Login/auth page background",
    "Ambient decorative element"
  ],
  "relatedAnimations": [
    "text-gradient-flow"
  ],
  "recommendedStyles": [
    "modern-gradient",
    "dark-mode",
    "glassmorphism"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": ".bg-gradient-shift {\n  position: relative;\n  overflow: hidden;\n}\n\n.bg-gradient-shift::before {\n  content: \"\";\n  position: absolute;\n  inset: -50%;\n  width: 200%;\n  height: 200%;\n  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n  will-change: transform;\n  animation: bg-gradient-shift 8s ease infinite;\n}\n\n@keyframes bg-gradient-shift {\n  0%, 100% { transform: translate(0, 0); }\n  25% { transform: translate(-25%, -10%); }\n  50% { transform: translate(-10%, -25%); }\n  75% { transform: translate(-25%, 0); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bg-gradient-shift::before {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes bg-gradient-shift {\n  0%, 100% { transform: translate(0, 0); }\n  25% { transform: translate(-25%, -10%); }\n  50% { transform: translate(-10%, -25%); }\n  75% { transform: translate(-25%, 0); }\n}\n\n@utility animate-bg-gradient-shift {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -50%;\n    width: 200%;\n    height: 200%;\n    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n    will-change: transform;\n    animation: bg-gradient-shift 8s ease infinite;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bg-gradient-shift::before {\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.div\n  animate={{ backgroundPosition: [\"0% 50%\", \"100% 50%\", \"0% 50%\"] }}\n  transition={{ duration: 8, repeat: Infinity, ease: \"linear\" }}\n  style={{\n    background: \"linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)\",\n    backgroundSize: \"400% 400%\",\n  }}\n/>"
    }
  ]
}