Appearance
Card 卡片
一个功能丰富的卡片组件，支持 3D 倾斜效果、水波动画、阴影和边框等特性。
基础用法
基础的卡片用法，包含标题、内容和底部区域。
基础卡片
这是一个基础的卡片组件，包含标题、内容和底部区域。
3D 倾斜效果
通过 enable3d 和 maxRotateAngle 属性可以控制 3D 倾斜效果。
启用 3D 效果
3D 倾斜效果
鼠标悬停时卡片会产生 3D 倾斜效果，倾斜角度为 3 度。
移动鼠标到卡片的不同位置，观察倾斜方向的变化。
自定义倾斜角度
小角度倾斜
倾斜角度：1 度
效果较为轻微
中等角度倾斜
倾斜角度：5 度
效果适中
大角度倾斜
倾斜角度：10 度
效果明显
禁用 3D 效果
禁用 3D 效果
这个卡片禁用了 3D 倾斜效果。
鼠标悬停时不会有倾斜动画。
水波动画
点击卡片时会产生水波扩散效果，可以通过 enableRipple 属性控制。
启用水波效果
水波动画
点击卡片任意位置，观察水波扩散效果。
水波会从点击点扩散到卡片的四个角落。
禁用水波效果
禁用水波动画
这个卡片禁用了水波动画效果。
点击卡片时不会有水波扩散。
阴影和边框
通过 shadow 和 bordered 属性可以控制卡片的阴影和边框样式。
带阴影的卡片
带阴影的卡片
这个卡片启用了阴影效果。
悬停时阴影会加深，增强立体感。
无边框卡片
无边框卡片
这个卡片禁用了边框效果。
看起来更加简洁现代。
组合使用
可以同时启用多种效果，创建丰富的交互体验。
完整功能卡片
这个卡片启用了所有功能：
- 3D 倾斜效果
- 水波动画
- 阴影效果
简约风格卡片
这个卡片禁用了所有动画效果：
- 无 3D 倾斜
- 无水波动画
- 无边框
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 卡片标题 | string | '' |
| shadow | 是否显示阴影 | boolean | false |
| bordered | 是否显示边框 | boolean | true |
| enable3d | 是否启用 3D 倾斜效果 | boolean | true |
| maxRotateAngle | 最大倾斜角度（度） | number | 1.5 |
| enableRipple | 是否启用水波效果 | boolean | true |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | 暂无事件 | - |
Slots
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
| default | 卡片的主要内容 | - |
| header | 卡片头部内容 | - |
| footer | 卡片底部内容 | - |
样式特性
3D 倾斜效果
- 鼠标悬停时卡片会根据鼠标位置产生 3D 倾斜效果
- 倾斜角度可以通过
maxRotateAngle属性调整 - 使用
perspective和transform实现真实的 3D 效果 - 鼠标离开时会有平滑的回弹动画
水波动画
- 点击卡片时会产生以点击点为中心的水波扩散效果
- 水波会自动扩散到卡片的四个角落
- 动画结束后水波元素会自动销毁
- 支持多次连续点击，每次都会产生独立的水波
视觉设计
- 多层立体阴影，营造悬浮感
- 高光渐变边框，增强立体效果
- 圆角设计，现代简洁
- 悬停时阴影加深，增强交互反馈
注意事项
- 3D 效果使用了 CSS
transform属性，在部分老旧浏览器中可能不支持 - 水波动画使用了 CSS
animation，确保浏览器支持@keyframes - 水波效果会自动计算点击点到四个角的最大距离，确保覆盖整个卡片
- 组件会智能处理鼠标事件，只有在启用相应功能时才会响应
- 所有动画都使用了
cubic-bezier缓动函数，提供流畅的动画体验 - 水波动画结束后会自动清理 DOM 元素，避免内存泄漏