动态定价卡片

现代单一定价卡，悬停时突出显示，并具有动画定价部分。当您想要突出显示特定计划（例如在价格计划选择屏幕上）时，这是理想的选择。

预览

Pro Plan

非常适合严肃的项目和商业用途。

¥49/ 月

无限项目创建
高级分析功能
全天候优先支持
自定义域连接

用例和功能

SaaS和服务价格表：适合突出显示最推荐的计划或用户在排列多个计划时将鼠标悬停在其上的计划。
视觉反馈：悬停时整张卡片会升起，顶部会出现一条彩色强调线。此外，价格部分也会按比例放大，以吸引用户对价格的关注。

设计和用户体验（Design & UX）的要点

平滑动画：使用“transition-alluration-300”平滑地更改悬停时的阴影和位置。
价格强调：通过使用 group-hover:scale-110 origin-left 类，当你将鼠标悬停在整张卡片上时，只有价格部分会从左侧开始稍微放大，使其更加醒目。
干净的布局：适当设置边距（填充）和文本颜色（石板样式）以创建现代设计，使信息易于阅读。

如何定制（定制指南）

更改颜色主题：bg-gradient-to-r from-blue-500 to-indigo-500或按钮悬停颜色hover:bg-blue-600更改为品牌颜色（例如from-emerald-500 to-teal-500表示绿色）您可以通过将其更改为hover:bg-emerald-600轻松应用主题颜色）。
动画调整：您可以通过改变hover:-translate-y-2的值来改变浮动高度，或者通过设置group-hover:scale-110为105来微调价格的扩展宽度等。

实现代码 (Implementation)

<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<!-- Header -->
<div class="mb-6">
  <h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
  <p class="text-sm text-slate-500">非常适合严肃的项目和商业用途。</p>
</div>

<!-- Price -->
<div class="mb-6 flex items-baseline">
  <span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">¥49</span>
  <span class="text-slate-500 ml-2">/ 月</span>
</div>

<!-- Features -->
<ul class="space-y-4 mb-8">
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">无限项目创建</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">高级分析功能</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">全天候优先支持</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">自定义域连接</span>
  </li>
</ul>

<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
  选择一个计划
</button>
</div>

浏览器支持

与最新版本的现代浏览器（Chrome、Firefox、Safari、Edge）配合良好。
它利用 Tailwind CSS 的“group-hover”功能，因此不需要特殊的 JavaScript。��