Pricing
倾斜 3D 定价卡片
一张带有 CSS 3D 倾斜、分层阴影和全息边缘的高端定价卡片。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a single premium pricing card with a CSS 3D tilt effect. The card should subtly rotate toward the cursor on hover using perspective and transform (no external libraries). Use a dark card surface with a thin holographic border that shifts color along the edge. Add a soft layered shadow beneath the card that moves opposite to the tilt. Inside, show a plan name in monospace, a large price, a short description, and a list of features separated by hairline dividers. End with a glowing CTA button. Use Tailwind CSS. Avoid generic checkmark icons—use short text labels or bullets.
中文提示词
创建一个带 CSS 3D 倾斜效果的单一高端定价卡片。卡片应在悬停时通过 perspective 和 transform 向光标方向轻微旋转(不使用外部库)。使用深色卡片表面,边缘有随角度变化颜色的全息细边框。在卡片下方添加与倾斜方向相反的柔和分层阴影。内部展示等宽套餐名、大号价格、简短描述,以及用细线分隔的功能列表。底部放置发光 CTA 按钮。使用 Tailwind CSS。避免通用勾选图标——使用短文本标签或项目符号。

Overview
一张具有空间深度和全息边缘的定价卡片。3D 倾斜让交互触感高级。
Features
- CSS 3D 跟随光标倾斜
- 全息变化边框
- 随倾斜移动的分层阴影
- 等宽套餐名 + 大号价格
- 细线分隔的功能列表
- 发光 CTA 按钮
- 无通用勾选图标
Usage
用作高端定价区域中的高亮套餐。
Customization
修改 prompt 以:
- 在旁边添加第二张卡片用于对比
- 将全息颜色改为品牌配色
- 在表面添加微妙反光光泽
- 包含月付/年付价格切换