脉搏跳动

{
  "slug": "pulse",
  "name": "脉搏跳动",
  "nameEn": "Pulse",
  "description": "元素以心跳般的节奏缩放跳动，常用于提示用户注意或表示活跃状态。",
  "descriptionEn": "Element pulses with a heartbeat-like rhythm. Used to draw attention or indicate active status.",
  "category": "micro-interaction",
  "tags": [
    "pulse",
    "heartbeat",
    "attention",
    "active",
    "notification"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "2s",
  "easing": "ease-in-out",
  "cssProperties": [
    "transform",
    "box-shadow"
  ],
  "isGPUAccelerated": false,
  "previewBg": "light",
  "keywords": [
    "pulse",
    "heartbeat",
    "beat",
    "attention",
    "notification",
    "active"
  ],
  "useCases": [
    "Notification badge",
    "Active status indicator",
    "CTA attention grabber",
    "Recording indicator"
  ],
  "relatedAnimations": [
    "shake",
    "hover-glow"
  ],
  "recommendedStyles": [
    "minimalist-flat",
    "soft-ui",
    "material-design"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes pulse {\n  0%, 100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);\n  }\n  50% {\n    transform: scale(1.05);\n    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);\n  }\n}\n\n.pulse {\n  animation: pulse 2s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pulse {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@keyframes pulse {\n  0%, 100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);\n  }\n  50% {\n    transform: scale(1.05);\n    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);\n  }\n}\n\n@utility animate-pulse-beat {\n  animation: pulse 2s ease-in-out infinite;\n}\n\n/* Usage: <span class=\"animate-pulse-beat inline-block rounded-full bg-blue-500 h-3 w-3\" /> */\n\n@media (prefers-reduced-motion: reduce) {\n  .pulse {\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) return <div className=\"static-indicator\" />;\n\n<motion.div\n  animate={{\n    scale: [1, 1.05, 1],\n    boxShadow: [\n      \"0 0 0 0 rgba(59, 130, 246, 0.5)\",\n      \"0 0 0 10px rgba(59, 130, 246, 0)\",\n      \"0 0 0 0 rgba(59, 130, 246, 0)\",\n    ],\n  }}\n  transition={{\n    duration: 2,\n    ease: \"easeInOut\",\n    repeat: Infinity,\n  }}\n>\n  Content\n</motion.div>"
    }
  ]
}