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