价格卡片 3 款（月付/年付切换 + 高亮推荐 CSS 源码）

效果演示（真实可交互）

下方为 3 档定价卡片：基础版、专业版（带”最受欢迎”徽章）、旗舰版。点击右上角开关可在月付/年付之间切换，价格数字会随之更新并带有轻微的弹跳反馈；悬停卡片有上浮与描边高亮效果。

完整代码

HTML 结构：每张卡片通过 data-monthly / data-yearly 两个自定义属性存储两套价格，切换时用 JS 读取对应值并写入价格文本：

<div class="pc-grid">
  <div class="pc-card" data-monthly="29" data-yearly="23">
    <span class="pc-badge">最受欢迎</span>
    <h3 class="pc-name">专业版</h3>
    <div class="pc-price">
      <span class="pc-currency">¥</span>
      <b class="pc-amount">29</b>
      <span class="pc-period">/月</span>
    </div>
    <ul class="pc-feats">
      <li>不限项目数量</li>
      <li>50 GB 静态资源空间</li>
    </ul>
    <button class="pc-btn">立即升级</button>
  </div>
</div>

核心 CSS：推荐卡片用渐变边框与顶部徽章突出，价格文字使用渐变文字色，切换时播放 scale 弹跳动画：

.pc-hot {
  border-color: rgba(108, 140, 255, .55);
  background: linear-gradient(170deg, rgba(108, 140, 255, .1), #171b26 40%);
  box-shadow: 0 10px 34px rgba(108, 140, 255, .18);
}
.pc-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #6c8cff, #a96cff); color: #fff;
  font-size: 11.5px; padding: 4px 14px; border-radius: 999px;
}
.pc-amount {
  font-size: 40px; font-weight: 800;
  background: linear-gradient(90deg, #6c8cff, #a96cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pc-price.pop .pc-amount { transform: scale(1.12); }

原生 JS 切换逻辑（无任何第三方库）：

let yearly = false;
const sw = document.getElementById('pcSwitch');
sw.addEventListener('click', () => {
  yearly = !yearly;
  sw.setAttribute('aria-checked', String(yearly));
  document.querySelectorAll('.pc-card').forEach(card => {
    const key = yearly ? 'yearly' : 'monthly';
    const el = card.querySelector('.pc-amount');
    el.parentElement.classList.add('pop');   // 触发弹跳动画
    el.textContent = card.dataset[key];
    setTimeout(() => el.parentElement.classList.remove('pop'), 220);
  });
});

参数说明

兼容性与性能

• 全部使用 CSS 过渡与 transform，动画只触发合成层，不阻塞主线程，60fps 流畅
• 渐变文字依赖 background-clip: text，需 Chrome 4+ / Safari 4+ / Firefox 49+，不支持时文字退化为普通颜色，不影响可读性
• 原生 JS 总代码量不足 20 行，无依赖、无网络请求，可放心嵌入任何页面
• 卡片数量增多时性能依旧稳定，建议定价页控制在 3~5 张以内，超出可考虑横向滚动容器

常见问题

Q: 如何改成美元或其他货币符号？ 直接修改 .pc-currency 文本与价格数值即可，符号与数字分离结构方便多语言切换。

Q: 年付价格要显示”按年总计”怎么办？ 在 .pc-price 下方追加一行小字说明，如”¥276/年（节省 ¥72）“，由 JS 同步计算即可。

Q: 移动端三列会挤压吗？ 组件内置媒体查询，820px 以下自动切换为单列并居中，宽度受限时阅读体验更好。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，按需修改颜色与文案即可。