形状变形

{
  "slug": "morph-shape",
  "name": "形状变形",
  "nameEn": "Morph Shape",
  "description": "通过 border-radius 过渡实现有机的 blob 形状连续变形，适合装饰性背景元素。",
  "descriptionEn": "Organic blob shape morphing through border-radius transitions. Perfect for decorative background elements and ambient visuals.",
  "category": "background",
  "tags": [
    "morph",
    "blob",
    "organic",
    "background",
    "continuous"
  ],
  "trigger": "continuous",
  "difficulty": "advanced",
  "duration": "8s",
  "easing": "ease-in-out",
  "cssProperties": [
    "border-radius"
  ],
  "isGPUAccelerated": false,
  "previewBg": "light",
  "keywords": [
    "morph",
    "blob",
    "shape",
    "organic",
    "border-radius",
    "ambient",
    "background"
  ],
  "useCases": [
    "Hero section decorative background",
    "Ambient blob ornaments",
    "Abstract art backgrounds",
    "Creative landing page accents"
  ],
  "relatedAnimations": [
    "background-gradient-shift",
    "parallax-float"
  ],
  "recommendedStyles": [
    "soft-ui",
    "glassmorphism",
    "modern-gradient"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes morph-shape {\n  0%, 100% {\n    border-radius: 40% 60% 70% 30% / 40% 30% 60% 70%;\n  }\n  25% {\n    border-radius: 70% 30% 50% 50% / 30% 50% 70% 40%;\n  }\n  50% {\n    border-radius: 60% 40% 30% 70% / 60% 70% 40% 30%;\n  }\n  75% {\n    border-radius: 30% 60% 60% 40% / 50% 40% 50% 60%;\n  }\n}\n\n.morph-shape {\n  width: 300px;\n  height: 300px;\n  background: var(--morph-gradient, linear-gradient(135deg, hsl(220 70% 60%), hsl(280 70% 60%)));\n  animation: morph-shape 8s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .morph-shape {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@keyframes morph-shape {\n  0%, 100% {\n    border-radius: 40% 60% 70% 30% / 40% 30% 60% 70%;\n  }\n  25% {\n    border-radius: 70% 30% 50% 50% / 30% 50% 70% 40%;\n  }\n  50% {\n    border-radius: 60% 40% 30% 70% / 60% 70% 40% 30%;\n  }\n  75% {\n    border-radius: 30% 60% 60% 40% / 50% 40% 50% 60%;\n  }\n}\n\n@utility animate-morph-shape {\n  animation: morph-shape 8s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .morph-shape {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: respect user's motion preferences\n// import { useReducedMotion } from \"framer-motion\";\n// const reduced = useReducedMotion();\n// If reduced, use a static border-radius without animation\n\nconst blobKeyframes = [\n  \"40% 60% 70% 30% / 40% 30% 60% 70%\",\n  \"70% 30% 50% 50% / 30% 50% 70% 40%\",\n  \"60% 40% 30% 70% / 60% 70% 40% 30%\",\n  \"30% 60% 60% 40% / 50% 40% 50% 60%\",\n  \"40% 60% 70% 30% / 40% 30% 60% 70%\",\n];\n\n<motion.div\n  animate={{ borderRadius: blobKeyframes }}\n  transition={{\n    duration: 8,\n    ease: \"easeInOut\",\n    repeat: Infinity,\n    repeatType: \"loop\",\n  }}\n  style={{\n    width: 300,\n    height: 300,\n    background: \"linear-gradient(135deg, hsl(220 70% 60%), hsl(280 70% 60%))\",\n  }}\n/>"
    }
  ]
}