# 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 倾斜效果增强用户参与感，同时保持界面简洁美观。