Hover Tilt Card Design Website

这是一个基于 Vue.js 和 vanilla-tilt.js 构建的卡片设计网站，展示了多种具有 3D 悬停倾斜效果的卡片组件。

功能特点

• 3D 倾斜效果：使用 vanilla-tilt.js 实现流畅的 3D 倾斜效果
• 多种卡片类型：
  • 基础倾斜卡片 (TiltCard)
  • 产品卡片 (ProductCard)
  • 个人资料卡片 (ProfileCard)
• 响应式设计：适配各种屏幕尺寸
• 动态光影效果：根据鼠标位置产生逼真的光影变化

技术栈

• Vue 3
• vanilla-tilt.js
• Vite
• CSS Grid & Flexbox

组件说明

TiltCard

基础倾斜卡片组件，适用于展示一般信息内容，包含标题、描述和图标插槽。

ProductCard

产品展示卡片，专为电商产品设计，包含产品图片、价格和操作按钮。

ProfileCard

个人资料卡片，适合展示用户信息，包含头像、姓名、职位和个人简介。

使用方法

1. 克隆项目
2. 安装依赖：npm install
3. 启动开发服务器：npm run dev
4. 访问 http://localhost:5174

自定义选项

所有卡片组件都支持自定义 vanilla-tilt 选项，包括：

• max: 最大倾斜角度
• speed: 动画速度
• glare: 是否启用眩光效果
• scale: 倾斜时的缩放比例
• perspective: 透视距离

设计理念

该项目旨在展示现代网页设计中的交互体验，通过微妙的 3D 倾斜效果增强用户参与感，同时保持界面简洁美观。