講道理，僅3行核心css代碼的rate評分組件，我被自己秀到頭皮發麻🙆‍♂️

像rate評分組件一般都用javascript寫，大概一年前，我在簡書寫過一篇文章原生Javascript實現星星評分組件，感興趣的可以去看一下，很久之前寫的，我不知道之前的代碼有多囉嗦，所以這次將是一個全新的嘗試，用css實現一個rate評分 ❗ 核心代碼也就三行😂

效果圖

原理

梳理如下：

1. 去找個好看的iconfont，Iconfont-阿里巴巴矢量圖標庫；
2. 借用5個radio單選框，把默認樣式都去掉，顯示默認的星星；
3. 用checked僞類監聽用戶選中✅，由默認的星星變成高亮的星星；
4. 然後配合~兄弟操作符把當前選中的所有兄弟元素都一起高亮💥；
5. 把5個radio單選框反向排列 ❗；

代碼

這是我事先生成好的iconfont

<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">

一個很簡潔的佈局：

<div class="rate-content">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
</div>

先把默認的星星顯示出來：

// 去掉默認樣式
input {
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
}

.rate-content {
  $main: #ffa822; // 高亮顏色
  $basic: #999; // 默認顏色
  
  // 單個星星
  input[name="rate"] {
    font-family: "iconfont"; // 之前引入的iconfont字體
    font-size: 30px;
    padding-right: 10px;
    
    // 默認顯示的星星
    &::after {
      content: "\e645";
      color: $basic;
      transition: color .4s ease; // 加點顏色過渡效果
    }
  }
}

效果如下：

實現選中單個星星：

input[name="rate"] {
  // 高亮的星星
  &:checked {
    &::after {
      content: "\e73c";
      color: $main;
    }
  }
}

效果如下：

實現連同兄弟元素一起高亮：

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"] {
    ...
  }
}

效果如下：

然後把input反向排列：

.rate-content {
  display: flex;
  flex-flow: row-reverse;
}

效果如下：

鼠標移入預覽選中效果：

羅嗦版：

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"],
  &:hover,
  &:hover ~ input[name="rate"] {
    ...
  }
}

優化版：

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:hover {
    &::after {
      content: "\e73c";
      color: $main;
    }
  
    // 兄弟元素一起高亮
    & ~ input[name="rate"] {
      &::after {
        content: "\e73c";
        color: $main;
      }
    }
  }
}

效果如下：

加入放大動畫

input[name="rate"] {
  transition: transform .2s ease; // 加入過渡效果
  
  // 高亮的星星
  &:checked,
  &:hover {
    ...
  }
  
  // 鼠標移入使星星放大
  &:hover {
    transform: scale(1.2);
  }
}

效果如下：

總結

核心代碼其實就是這兩段，其他都是可選的🈚

元素反向排列：

display: flex;
flex-flow: row-reverse;

兄弟元素操作：

input:checked ~ input

如果不用flex反向排列，還可以用rotateZ:

.rate-content {
  display: flex;
  // flex-flow: row-reverse;
  transform: rotateZ(180deg);
}

效果如下：

z軸旋轉180deg之後發現星星的頭跟尾巴反過來了，那麼子元素也旋轉180deg即可：

.rate-content {
  input[name="rate"] {
    transform: rotateZ(180deg);
  }
}

效果如下：

需要注意的細節

input[name="rate"] {
  // padding-right: 10px;
  margin-right: 10px;
}

如果用外邊距的話，那麼會出現以下情形:

內邊距的作用是保持元素連貫性以及擴大點擊範圍🍡，最後附上本文代碼的codepen地址：css實現rate評分

最後

本文到此結束，希望以上內容對你有些許幫助，如若喜歡請記得點個贊跟關注哦 💨

微信公衆號「不會寫前端」，將不定時更新最新、實用的前端技巧/技術性文章，歡迎關注，一起學習 🌘