悬浮发光

{
  "slug": "hover-glow",
  "name": "悬浮发光",
  "nameEn": "Hover Glow",
  "description": "鼠标悬停时元素边框发出柔和光晕，适合 CTA 按钮和交互卡片。",
  "descriptionEn": "Element gains a soft glowing border on hover. Perfect for CTA buttons and interactive cards.",
  "category": "hover",
  "tags": [
    "hover",
    "glow",
    "border",
    "interactive"
  ],
  "trigger": "on-hover",
  "difficulty": "beginner",
  "duration": "300ms",
  "easing": "ease-out",
  "cssProperties": [
    "box-shadow",
    "opacity"
  ],
  "isGPUAccelerated": true,
  "previewBg": "dark",
  "keywords": [
    "hover",
    "glow",
    "border glow",
    "neon",
    "CTA",
    "button hover"
  ],
  "useCases": [
    "CTA button hover",
    "Interactive card highlight",
    "Navigation link emphasis",
    "Feature highlight on hover"
  ],
  "relatedAnimations": [
    "hover-lift"
  ],
  "recommendedStyles": [
    "cyberpunk-neon",
    "synthwave",
    "dark-mode"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": ".hover-glow {\n  position: relative;\n}\n\n.hover-glow::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);\n  opacity: 0;\n  transition: opacity 300ms ease-out;\n  pointer-events: none;\n  z-index: -1;\n}\n\n.hover-glow:hover::before {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hover-glow {\n    animation: none;\n    transition: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* GPU-optimized: animates opacity on pseudo-element instead of box-shadow */\n@utility hover-glow {\n  position: relative;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);\n    opacity: 0;\n    transition: opacity 300ms ease-out;\n    pointer-events: none;\n    z-index: -1;\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hover-glow {\n    animation: none;\n    transition: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: consider disabling for reduced motion users\n// import { useReducedMotion } from \"framer-motion\";\n\n<motion.button\n  whileHover={{\n    boxShadow: \"0 0 15px rgba(99,102,241,0.4), 0 0 30px rgba(99,102,241,0.2), 0 0 45px rgba(99,102,241,0.1)\",\n  }}\n  transition={{ duration: 0.3 }}\n>\n  Click me\n</motion.button>"
    }
  ]
}