脉冲光环

{
  "slug": "pulse-ring",
  "name": "脉冲光环",
  "nameEn": "Pulse Ring",
  "description": "从元素中心向外扩散的脉冲圆环效果，适合状态指示器、在线标志和注意力引导。",
  "descriptionEn": "Concentric rings pulse outward from the element center. Ideal for status indicators, online badges, and attention cues.",
  "category": "micro-interaction",
  "tags": [
    "pulse",
    "ring",
    "status",
    "attention",
    "continuous"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "2s",
  "easing": "ease-out",
  "cssProperties": [
    "box-shadow",
    "opacity",
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "dark",
  "keywords": [
    "pulse",
    "ring",
    "beacon",
    "status indicator",
    "online",
    "notification",
    "ping"
  ],
  "useCases": [
    "Online/active status indicator",
    "Notification attention beacon",
    "Live streaming indicator",
    "New feature highlight dot"
  ],
  "relatedAnimations": [
    "hover-glow",
    "ripple-click"
  ],
  "recommendedStyles": [
    "cyberpunk-neon",
    "dark-mode",
    "minimalist-flat"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes pulse-ring {\n  0% {\n    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);\n  }\n  70% {\n    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\n  }\n}\n\n.pulse-ring {\n  --sk-color: rgba(34, 197, 94, 0.5);\n  --sk-duration: 2s;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #22c55e;\n  animation: pulse-ring var(--sk-duration) ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pulse-ring {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes pulse-ring {\n  0% {\n    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);\n  }\n  70% {\n    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\n  }\n}\n\n@utility animate-pulse-ring {\n  --sk-duration: 2s;\n  animation: pulse-ring var(--sk-duration) ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-pulse-ring {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n<div className=\"relative\">\n  <motion.span\n    className=\"absolute inset-0 rounded-full bg-green-500\"\n    animate={{\n      boxShadow: [\n        \"0 0 0 0 rgba(34,197,94,0.5)\",\n        \"0 0 0 10px rgba(34,197,94,0)\",\n        \"0 0 0 0 rgba(34,197,94,0)\",\n      ],\n    }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeOut\" }}\n  />\n  <span className=\"relative h-3 w-3 rounded-full bg-green-500 block\" />\n</div>"
    }
  ]
}