微光扫过

{
  "slug": "shimmer",
  "name": "微光扫过",
  "nameEn": "Shimmer",
  "description": "光线从左到右扫过元素表面，Apple 风格的加载占位符效果。",
  "descriptionEn": "A light sweep moves across the element surface from left to right. Apple-style loading placeholder.",
  "category": "loading",
  "tags": [
    "shimmer",
    "shine",
    "loading",
    "skeleton",
    "apple"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "2s",
  "easing": "linear",
  "cssProperties": [
    "background-position"
  ],
  "isGPUAccelerated": false,
  "previewBg": "light",
  "keywords": [
    "shimmer",
    "shine",
    "skeleton",
    "loading",
    "placeholder",
    "apple"
  ],
  "useCases": [
    "Content loading placeholder",
    "Image loading state",
    "Card skeleton",
    "List loading"
  ],
  "relatedAnimations": [
    "skeleton-pulse",
    "spinner-dots"
  ],
  "recommendedStyles": [
    "apple-style",
    "minimalist-flat",
    "soft-ui"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes shimmer {\n  from {\n    background-position: -200% 0;\n  }\n  to {\n    background-position: 200% 0;\n  }\n}\n\n.shimmer {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 25%,\n    #e0e0e0 37%,\n    #f0f0f0 63%\n  );\n  background-size: 200% 100%;\n  animation: shimmer 2s linear infinite;\n  border-radius: 0.375rem;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shimmer {\n    animation: none;\n    background: #e5e7eb;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@keyframes shimmer {\n  from {\n    background-position: -200% 0;\n  }\n  to {\n    background-position: 200% 0;\n  }\n}\n\n@utility animate-shimmer {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 25%,\n    #e0e0e0 37%,\n    #f0f0f0 63%\n  );\n  background-size: 200% 100%;\n  animation: shimmer 2s linear infinite;\n}\n\n/* Usage: <div class=\"animate-shimmer h-4 w-3/4 rounded-md\" /> */\n\n@media (prefers-reduced-motion: reduce) {\n  .shimmer {\n    animation: none;\n    background: #e5e7eb;\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=\"bg-gray-200 rounded-md\" />;\n\n<motion.div\n  style={{\n    background: \"linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%)\",\n    backgroundSize: \"200% 100%\",\n    borderRadius: \"0.375rem\",\n  }}\n  animate={{ backgroundPosition: [\"-200% 0\", \"200% 0\"] }}\n  transition={{\n    duration: 2,\n    ease: \"linear\",\n    repeat: Infinity,\n  }}\n  className=\"h-4 w-3/4\"\n/>"
    }
  ]
}