(給100素材網點亮★號，提升開發技能)

像rate評分組件一般都用javascript寫，所以這次將是一個全新的嘗試，用css實現一個rate評分 ? 核心代碼也就三行?01效果圖02原理主要是借助radio單選框，梳理如下：

• 去找個好看的iconfont；

• 借用5個radio單選框，把默認樣式都去掉，顯示默認的星星；

• 用checked偽類監聽用戶選中?，由默認的星星變成高亮的星星；

• 然后配合~兄弟操作符把當前選中的所有兄弟元素都一起高亮?；

• 把5個radio單選框反向排列?；

03代碼這是我事先生成好的iconfont："stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">一個很簡潔的布局："rate-content"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate">

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

// 去掉默認樣式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"] { ... }}效果如下：

然后把星星反向排列：

.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); }}效果如下：04總結核心代碼其實就是這兩段，其他都是可選的?元素反向排列：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);}}效果如下：05需要注意的細節這里用的是內邊距：input[name="rate"] { // padding-right: 10px; margin-right: 10px;}如果用外邊距的話，那么會出現以下情形:內邊距的作用是保持元素連貫性以及擴大點擊范圍?

總結

以上是生活随笔為你收集整理的css限制字体三行_讲道理，仅3行核心css代码的rate评分组件，我被自己秀到头皮发麻...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。