商品卡片（颜色切换 + 数量步进购物车 CSS 源码）

效果演示（真实可交互）

下方为商品卡片：点击四个色板圆点，卡片背景氛围光会切换为对应颜色；数量步进器支持 1~9 之间增减；点击”加入购物车”会弹出绿色 Toast 提示并伴有价格弹跳动画，“立即购买”按钮有悬停上浮效果。

完整代码

HTML 结构：卡片分为图片区（含新品徽章与商品主图）和内容区（品牌、名称、色板、数量步进、价格、操作按钮）：

<div class="pd-card">
  <div class="pd-img">
    <span class="pd-badge">新品</span>
    <span class="pd-emoji">🎧</span>
  </div>
  <div class="pd-body">
    <div class="pd-brand">YUEMIU AUDIO</div>
    <h3 class="pd-name">粤喵无线降噪耳机 Pro</h3>
    <div class="pd-colors">
      <button class="pd-swatch" data-color="#3a3f4b"></button>
      <button class="pd-swatch" data-color="#8d9bb5"></button>
    </div>
    <div class="pd-stepper">
      <button>−</button><b>1</b><button>＋</button>
    </div>
    <span class="pd-price-old">¥899</span>
    <b class="pd-price-now">¥799</b>
    <button class="pd-btn cart">🛒 加入购物车</button>
    <p class="pd-toast">✅ 已加入购物车（1 件）</p>
  </div>
</div>

核心 CSS：色板选中态用白边 + 蓝色外环表示，Toast 通过 opacity/transform 组合出现，价格变化时有 scale 弹跳：

.pd-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #6c8cff; }
.pd-toast { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.pd-toast.show { opacity: 1; transform: translateY(0); }
.pd-price-now.pop { transform: scale(1.12); }

原生 JS 交互（无第三方库）：

swatches.forEach(sw => {
  sw.addEventListener('click', () => {
    swatches.forEach(s => s.classList.remove('active'));
    sw.classList.add('active');
    img.style.background =
      'radial-gradient(circle at 30% 30%, ' + sw.dataset.color + '55, transparent 55%), #1a2130';
  });
});
document.getElementById('pdCart').addEventListener('click', () => {
  toast.classList.add('show');
  priceNow.classList.add('pop');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toast.classList.remove('show'), 1800);
});

参数说明

兼容性与性能

• 颜色切换只更新 background 属性，无节点增删，性能开销可忽略
• 所有动画均为 transition + transform，移动端与低端设备表现稳定
• 色板用 box-shadow 外环表示选中，避免使用额外 DOM 节点
• 纯原生 JS，无依赖无请求，可直接嵌入任何电商前端框架（Vue/React 中改为数据驱动即可）

常见问题

Q: 色板怎么加”已售罄”状态？ 在 .pd-swatch 上加 .sold-out 类，用对角线条纹背景或降低透明度并禁用点击即可。

Q: 商品图想用真实图片？ 把 .pd-emoji 换成 <img>，设置 object-fit: cover 铺满图片区，颜色切换改为叠加一层半透明色罩。

Q: 加入购物车如何做角标计数？ 在购物车按钮或导航栏放一个徽章元素，每次点击时读取当前数量累加并更新文本，配合弹跳动画即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换商品信息与配色即可用于真实商城。