跳到主要内容
Example+

弹簧拖拽

ui

src

TSX
// npm install motion
"use client";

import { motion } from "motion/react";

export default function Page() {
    return (
        <div className="flex min-h-screen items-center justify-center">
            <motion.div
                drag
                dragSnapToOrigin
                dragTransition={{ bounceStiffness: 400, bounceDamping: 10 }}
                whileDrag={{ scale: 1.2, rotate: 7 }}
                whileHover={{ scale: 1.06 }}
                className="cursor-grab active:cursor-grabbing"
            >
                <div className="size-24 rounded-[12%_50%_50%_50%] bg-gradient-to-br from-cyan-100 via-sky-400 to-blue-700 [transform:scaleX(0.72)_scaleY(1.24)_rotate(45deg)]" />
            </motion.div>
        </div>
    );
}