卡片组件

1.先看效果

import { useState } from 'react'

import { motion } from 'framer-motion'

import { Button } from "@/components/ui/button"

export default function Component() {

const [isHovered, setIsHovered] = useState(false)

return (

className="w-full max-w-md bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out"

whileHover={{ scale: 1.05 }}

onHoverStart={() => setIsHovered(true)}

onHoverEnd={() => setIsHovered(false)}

src="/placeholder.svg?height=200&width=400"

alt="Beautiful landscape"

className="w-full h-48 object-cover"

Embark on a journey through breathtaking landscapes and awe-inspiring vistas.

Let nature's beauty captivate your senses and inspire your soul.

initial={{ opacity: 0, scale: 0.5 }}

animate={{ opacity: isHovered ? 1 : 0, scale: isHovered ? 1 : 0.5 }}

transition={{ duration: 0.3 }}

Explore Now →

)

}

发布人: xiaolan

发布时间: 2024-10-10 15:25:56

#源码分享

扫描二维码分享

请登录后发表评论。