食谱卡片（份量换算 + 收藏交互 CSS 源码）

效果演示（真实可交互）

下方是一张广式腊味煲仔饭食谱卡片：顶部渐变插画区带表情符号与「粤式经典」徽章，中部展示烹饪时间、难度与份量元信息，食材清单每行右侧的用量与份量实时联动。点击「＋ / −」把份量从 1 调到 8，米、腊肠、腊肉、鸡蛋等用量会按比例自动换算；点击「收藏食谱」可切换为红色「♥ 已收藏」状态，并带一次心跳缩放动画。

完整代码

HTML 结构：卡片由插画区（.rc-hero）与内容区（.rc-body）组成，食材行用静态结构 + JS 索引一一对应：

<div class="rc-card">
  <div class="rc-hero">
    <span class="rc-emoji">🍚</span>
    <span class="rc-badge">粤式经典 · 一锅成饭</span>
  </div>
  <div class="rc-body">
    <h3>广式腊味煲仔饭</h3>
    <div class="rc-meta">
      <span>⏱ 45 分钟</span><span>🔥 中难度</span><span>👥 <b>2</b> 人份</span>
    </div>
    <ul class="rc-ing">
      <li><span>丝苗米</span><b class="rc-q">150g</b></li>
      <!-- 其余食材行同理 -->
    </ul>
  </div>
</div>

核心 CSS：卡片使用深色渐变 + 双层 radial 光斑营造氛围；收藏按钮激活态用边框与背景色切换，图标配一次心跳关键帧：

.rc-fav.active {
  background: rgba(255, 107, 138, .14); border-color: #ff6b8a; color: #ff6b8a;
}
.rc-fav.active #rcFavIcon { animation: rcHeart .45s ease; }
@keyframes rcHeart {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

原生 JS：份量换算的核心是「每份基准量数组 × 份数」，再按单位格式化：

const BASE = [75, 1, 40, 0.5, 2, 15]; // 每份：米g/腊肠根/腊肉g/鸡蛋个/菜心棵/酱油ml
const UNITS = ['g', ' 根', 'g', ' 个', ' 棵', 'ml'];
function render() {
  qEls.forEach((el, i) => {
    el.textContent = fmt(BASE[i] * servings) + UNITS[i];
  });
}

参数说明

兼容性与性能

• 全部使用原生 DOM API 与 CSS 动画，无第三方依赖，兼容所有现代浏览器
• 用量换算只更新 6 个文本节点，无重排压力，不会触发整卡重绘
• Number.isInteger 判断整数，0.5 份鸡蛋这类小数用量会显示为一位小数
• 收藏心跳动画走 transform 合成属性，性能开销可忽略

常见问题

Q: 换了菜谱怎么改用量？ 只需替换 BASE 与 UNITS 两个数组，顺序与食材行一一对应即可，份数逻辑无需改动。

Q: 份数想支持小数（如 2.5 人份）？ 把加减按钮步长改为 0.5 并去掉整数下限判断即可，换算公式天然支持小数。

Q: 收藏状态刷新后丢失怎么办？ 演示版只做了内存态；生产环境可把状态写入 localStorage 或对接登录用户接口。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。