Dest1ny在这里祝大家中秋节快乐！

希望大家多吃月饼

祝大家最好的兄弟家人就在身边，最爱的人就在对面！

画质太高传不上来😁，大家凑活看！

希望12月可以到500粉丝！！

这里附上源码：

import React, { useState } from 'react'
import { motion } from 'framer-motion'

const Lantern = ({ x, y, scale = 1 }) => (
  <motion.div
    className="absolute"
    style={{ x, y }}
    animate={{ y: y + 10 }}
    transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
  >
    <svg width={30 * scale} height={40 * scale} viewBox="0 0 30 40">
      <path d="M15 5 L25 15 L25 35 L5 35 L5 15 Z" fill="#ff6b6b" />
      <path d="M14 0 L16 0 L16 5 L14 5 Z" fill="#feca57" />
      <path d="M14 35 L16 35 L16 40 L14 40 Z" fill="#feca57" />
    </svg>
  </motion.div>
)

const OsmanthusFlower = ({ x, y }) => (
  <motion.div
    className="absolute text-yellow-200 text-xs"
    style={{ x, y }}
    animate={{
      y: [y, y + 700],
      rotate: [0, 360],
    }}
    transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
  >
    ✿
  </motion.div>
)

export default function Component() {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <div className="h-screen w-full bg-gradient-to-b from-indigo-900 via-purple-900 to-pink-800 flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 overflow-hidden">
        {[...Array(50)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute bg-white rounded-full"
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              width: Math.random() * 2 + 1,
              height: Math.random() * 2 + 1,
            }}
            animate={{
              scale: [0, 1, 0],
              opacity: [0, 1, 0],
            }}
            transition={{
              duration: Math.random() * 2 + 1,
              repeat: Infinity,
              delay: Math.random() * 2,
            }}
          />
        ))}
        {[...Array(5)].map((_, i) => (
          <OsmanthusFlower key={i} x={Math.random() * window.innerWidth} y={-20} />
        ))}
      </div>
      <div className="text-center z-10">
        <motion.div
          className="text-5xl font-bold text-yellow-200 mb-4"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.5 }}
        >
          Dest1ny
        </motion.div>
        <motion.div
          className="w-64 h-64 relative mx-auto mb-8"
          animate={{
            rotate: [0, 5, -5, 0],
          }}
          transition={{
            duration: 10,
            ease: "easeInOut",
            times: [0, 0.33, 0.66, 1],
            repeat: Infinity,
          }}
          onHoverStart={() => setIsHovered(true)}
          onHoverEnd={() => setIsHovered(false)}
        >
          <svg viewBox="0 0 100 100" className="w-full h-full">
            <defs>
              <radialGradient id="moonGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" stopColor="#fffdf5" />
                <stop offset="50%" stopColor="#fff9e5" />
                <stop offset="100%" stopColor="#fff5d6" />
              </radialGradient>
              <filter id="moonTexture">
                <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" result="noise"/>
                <feDiffuseLighting in="noise" lightingColor="#fff5d6" surfaceScale="2">
                  <feDistantLight azimuth="45" elevation="60" />
                </feDiffuseLighting>
              </filter>
              <mask id="moonMask">
                <circle cx="50" cy="50" r="49" fill="white" />
              </mask>
            </defs>
            <g mask="url(#moonMask)">
              <circle cx="50" cy="50" r="49" fill="url(#moonGradient)" />
              <circle cx="50" cy="50" r="49" fill="url(#moonGradient)" filter="url(#moonTexture)" opacity="0.3" />
              <g opacity="0.7">
                <ellipse cx="25" cy="30" rx="10" ry="7" fill="#e6d9a5" transform="rotate(-20 25 30)" />
                <ellipse cx="65" cy="65" rx="15" ry="10" fill="#e6d9a5" transform="rotate(15 65 65)" />
                <ellipse cx="80" cy="40" rx="12" ry="8" fill="#e6d9a5" transform="rotate(-10 80 40)" />
              </g>
              <path d="M30,50 Q45,55 60,50 T90,50" fill="none" stroke="#d4c690" strokeWidth="0.5" opacity="0.6" />
              <path d="M10,70 Q25,65 40,70 T70,70" fill="none" stroke="#d4c690" strokeWidth="0.5" opacity="0.6" />
              <path d="M50,10 Q65,25 50,40 T50,70" fill="none" stroke="#d4c690" strokeWidth="0.5" opacity="0.6" />
              
              {/* Chang'e silhouette */}
              <path d="M50,20 Q60,25 55,40 Q45,35 50,20" fill="#d4c690" opacity="0.4" />
              
              {/* Jade Rabbit */}
              <circle cx="70" cy="60" r="5" fill="#f0e6c3" />
              <circle cx="72" cy="58" r="1" fill="#d4c690" />
              <path d="M65,65 Q70,60 75,65" fill="none" stroke="#d4c690" strokeWidth="0.5" />
            </g>
          </svg>
          <motion.div 
            className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-yellow-100/20 rounded-full"
            animate={{ opacity: isHovered ? 0.5 : 0.2 }}
          />
        </motion.div>
        <h1 className="text-4xl font-bold text-white mb-4">中秋节快乐</h1>
        <p className="text-xl text-gray-200">愿你和家人团圆，共赏明月</p>
      </div>
      <Lantern x={50} y={100} scale={1.2} />
      <Lantern x={window.innerWidth - 100} y={150} />
      <div className="absolute bottom-0 w-full">
        <svg viewBox="0 0 1440 320" className="w-full">
          <path fill="#4a0e4e" fillOpacity="1" d="M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,80C672,53,768,75,864,101.3C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>
    </div>
  )
}