骨架屏脉冲

{
  "slug": "skeleton-pulse",
  "name": "骨架屏脉冲",
  "nameEn": "Skeleton Pulse",
  "description": "骨架屏加载占位符的脉冲闪烁效果，提示用户内容正在加载中。",
  "descriptionEn": "Skeleton loading placeholder with a pulsing shimmer effect, indicating content is loading.",
  "category": "loading",
  "tags": [
    "loading",
    "skeleton",
    "pulse",
    "placeholder"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "2s",
  "easing": "cubic-bezier(0.4, 0, 0.6, 1)",
  "cssProperties": [
    "opacity"
  ],
  "isGPUAccelerated": false,
  "previewBg": "light",
  "keywords": [
    "skeleton",
    "loading",
    "pulse",
    "shimmer",
    "placeholder",
    "content loading"
  ],
  "useCases": [
    "Data loading states",
    "Image placeholders",
    "Table row loading",
    "Profile card loading"
  ],
  "relatedAnimations": [
    "spinner-dots"
  ],
  "recommendedStyles": [
    "corporate-clean",
    "material-design",
    "notion-style"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n}\n\n.skeleton-pulse {\n  background-color: #e5e7eb;\n  border-radius: 0.375rem;\n  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .skeleton-pulse {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Tailwind has a built-in animate-pulse utility */\n/* <div class=\"animate-pulse bg-gray-200 rounded-md h-4 w-3/4\"></div> */\n\n/* Custom variant with different timing */\n@keyframes skeleton-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n@utility animate-skeleton-pulse {\n  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .skeleton-pulse {\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={{ opacity: [1, 0.4, 1] }}\n  transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  className=\"h-4 w-3/4 rounded bg-gray-200\"\n/>"
    }
  ]
}