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