弹簧拖拽
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>
);
}