Micro-interaction / Hover

围绕单个用户操作（如点击、悬停）触发的细腻视觉反馈。微交互让界面感觉鲜活、响应迅速且充满人情味。

🎲 3D 倾斜

鼠标悬停时卡片沿X/Y轴轻微旋转，创造立体透视感。

点击时弹性缩放，释放物理质感。

💡 阴影扩散

悬停时光晕向外扩散，营造发光效果。

🎨 色彩翻转

渐变方向反转并伴随轻微旋转。

🧲

磁性吸附：鼠标靠近时元素被吸引。

悬停时从中心扩散的圆形波纹。

开关切换：弹性位移 + 状态反馈。

加载状态：节奏感弹跳动画。

/* 3D 倾斜悬停 */
.tilt-card:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.05);
}

/* 弹性缩放 */
.bounce-btn {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-btn:hover { transform: scale(1.15); }
.bounce-btn:active { transform: scale(0.95); }

/* 阴影扩散 */
.shadow-card:hover {
  box-shadow: 0 20px 40px rgba(99,102,241,0.4),
              0 0 60px rgba(236,72,153,0.2);
}
    

← 返回索引