CSS 实例系列：Rate 爱心评分，一键 get❤

谈到交互，不得不提 CSS，它能呈现出各种神奇的视觉效果，而本期的 CSS 实例系列，将通过一个看似简单的爱心评分功能，揭示 CSS 的奇妙之处。

心动一瞬间，Rate ❤

HTML 构造

<div class="heart-rate">
  <input type="radio" id="rate-1" name="rate">
  <label for="rate-1" class="heart">❤</label>

  <input type="radio" id="rate-2" name="rate">
  <label for="rate-2" class="heart">❤</label>

  <input type="radio" id="rate-3" name="rate">
  <label for="rate-3" class="heart">❤</label>

  <input type="radio" id="rate-4" name="rate">
  <label for="rate-4" class="heart">❤</label>

  <input type="radio" id="rate-5" name="rate">
  <label for="rate-5" class="heart">❤</label>
</div>

几行简单的 HTML 代码，构建出 5 个爱心 ❤，整齐排列，等待着我们的评分。

CSS 点睛

CSS 妙笔生花，让爱心灵动起来：

.heart-rate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.heart {
  width: 50px;
  height: 50px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.heart:hover,
.heart:active {
  background: #f00;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .heart {
  background: #f00;
}

关键一击，JS 收尾

最后，JS 出手，让交互水到渠成：

const rateHearts = document.querySelectorAll(".heart");
const rateInputs = document.querySelectorAll("input[type=radio]");

rateHearts.forEach((heart, index) => {
  heart.addEventListener("click", () => {
    rateInputs[index].checked = true;
  });
});

至此，Rate 爱心评分功能圆满收官。用户点击爱心 ❤，即刻为其评分，无需多余操作，尽显互动魅力。