浪漫情人节
1.先看效果
2.源代码（使用TypeScript和React组件）
'use client'
import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import confetti from 'canvas-confetti'
import { Heart, Gift, Send } from 'lucide-react'
export default function ValentinePage() {
const [isGiftOpen, setIsGiftOpen] = useState(false)
const [message, setMessage] = useState('')
const [floatingHearts, setFloatingHearts] = useState<{ id: number; x: number }[]>([])
useEffect(() => {
const interval = setInterval(() => {
setFloatingHearts((prev) => [
...prev,
{ id: Date.now(), x: Math.random() * 100 },
].slice(-20))
}, 500)
return () => clearInterval(interval)
}, [])
const handleGiftClick = () => {
setIsGiftOpen(true)
setMessage('我爱你!')
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
})
}
return (
initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="text-4xl md:text-6xl font-bold text-pink-700 mb-8" > 浪漫情人节 animate={{ scale: [1, 1.1, 1] }} transition={{ repeat: Infinity, duration: 1.5 }} className="mb-8" > whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative cursor-pointer mb-8" onClick={handleGiftClick} > className="absolute top-0 left-0 w-full h-1/4 bg-pink-400" animate={isGiftOpen ? { rotateX: 180, y: -20 } : {}} /> {message && ( initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.5 }} className="text-2xl font-bold text-red-600 mb-8" > {message} )} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="bg-red-500 text-white px-6 py-3 rounded-full flex items-center space-x-2 hover:bg-red-600 transition-colors" > 发送爱意 {floatingHearts.map((heart) => ( key={heart.id} initial={{ y: '100%', x: `${heart.x}%`, opacity: 0 }} animate={{ y: '-100%', opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 5 }} className="absolute" > ))}
)
}
扫描二维码分享
评论区
请登录后发表评论。