悬浮抬升

{
  "slug": "hover-lift",
  "name": "悬浮抬升",
  "nameEn": "Hover Lift",
  "description": "鼠标悬停时元素向上移动并加深阴影，营造悬浮立体感。",
  "descriptionEn": "Element lifts upward with enhanced shadow on hover, creating a floating 3D effect.",
  "category": "hover",
  "tags": [
    "hover",
    "lift",
    "shadow",
    "interactive"
  ],
  "trigger": "on-hover",
  "difficulty": "beginner",
  "duration": "200ms",
  "easing": "cubic-bezier(0.33, 1, 0.68, 1)",
  "cssProperties": [
    "transform",
    "box-shadow"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "hover",
    "lift",
    "float",
    "shadow",
    "card hover",
    "elevation"
  ],
  "useCases": [
    "Card hover effect",
    "Button hover state",
    "Clickable list items",
    "Product grid items"
  ],
  "relatedAnimations": [
    "hover-glow"
  ],
  "recommendedStyles": [
    "neo-brutalist",
    "material-design",
    "corporate-clean"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": ".hover-lift {\n  will-change: transform, box-shadow;\n  transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1),\n              box-shadow 200ms cubic-bezier(0.33, 1, 0.68, 1);\n}\n\n.hover-lift:hover {\n  transform: translateY(-4px);\n  box-shadow:\n    0 12px 20px -8px rgba(0, 0, 0, 0.15),\n    0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hover-lift {\n    animation: none;\n    transition: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Use Tailwind utility classes directly */\n/* <div class=\"transition-all duration-200 ease-out\n              hover:-translate-y-1\n              hover:shadow-lg\"> */\n\n/* Or define a custom utility in Tailwind v4 */\n@utility hover-lift {\n  will-change: transform, box-shadow;\n  transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1),\n              box-shadow 200ms cubic-bezier(0.33, 1, 0.68, 1);\n  &:hover {\n    transform: translateY(-4px);\n    box-shadow:\n      0 12px 20px -8px rgba(0, 0, 0, 0.15),\n      0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hover-lift {\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.div\n  whileHover={{ y: -4, boxShadow: \"0 12px 20px -8px rgba(0,0,0,0.15)\" }}\n  transition={{ duration: 0.2, ease: [0.33, 1, 0.68, 1] }}\n>\n  Hover me\n</motion.div>"
    }
  ]
}