如何用css實現(xiàn)一個rate評分

今天小編給大家分享一下如何用css實現(xiàn)一個rate評分的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　梳理如下：

　　去找個好看的iconfont，[Iconfont-阿里巴巴矢量圖標(biāo)庫]、；

　　借用5個radio單選框，把默認(rèn)樣式都去掉，顯示默認(rèn)的星星；

　　用checked偽類監(jiān)聽用戶選中，由默認(rèn)的星星變成高亮的星星；

　　然后配合——兄弟操作符把當(dāng)前選中的所有兄弟元素都一起高亮；

　　把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>

　　先把默認(rèn)的星星顯示出來：

　　// 去掉默認(rèn)樣式

　　input {

　　-webkit-appearance: none;

　　border: none;

　　outline: none;

　　cursor: pointer;

　　}

　　.rate-content {

　　$main: #ffa822; // 高亮顏色

　　$basic: #999; // 默認(rèn)顏色

　　// 單個星星

　　input[name="rate"] {

　　font-family: "iconfont"; // 之前引入的iconfont字體

　　font-size: 30px;

　　padding-right: 10px;

　　// 默認(rèn)顯示的星星

　　&::after {

　　content: "\e645";

　　color: $basic;

　　transition: color .4s ease; // 加點顏色過渡效果

　　}

　　}

　　}

　　實現(xiàn)選中單個星星：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked {

　　&::after {

　　content: "\e73c";

　　color: $main;

　　}

　　}

　　}

　　實現(xiàn)連同兄弟元素一起高亮：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked,

　　&:checked &mdash;&mdash; input[name="rate"] {

　　...

　　}

　　}

　　效果如下：

　　然后把input反向排列：

　　.rate-content {

　　display: flex;

　　flex-flow: row-reverse;

　　}

　　鼠標(biāo)移入預(yù)覽選中效果：

　　羅嗦版：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked,

　　&:checked &mdash;&mdash; input[name="rate"],

　　&:hover,

　　&:hover &mdash;&mdash; input[name="rate"] {

　　...

　　}

　　}

　　優(yōu)化版：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked,

　　&:hover {

　　&::after {

　　content: "\e73c";

　　color: $main;

　　}

　　// 兄弟元素一起高亮

　　& &mdash;&mdash; input[name="rate"] {

　　&::after {

　　content: "\e73c";

　　color: $main;

　　}

　　}

　　}

　　}

　　加入放大動畫

　　input[name="rate"] {

　　transition: transform .2s ease; // 加入過渡效果

　　// 高亮的星星

　　&:checked,

　　&:hover {

　　...

　　}

　　// 鼠標(biāo)移入使星星放大

　　&:hover {

　　transform: scale(1.2);

　　}

　　}

　　總結(jié)

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

　　元素反向排列：

　　display: flex;

　　flex-flow: row-reverse;

　　兄弟元素操作：

　　input:checked &mdash;&mdash; input

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

　　.rate-content {

　　display: flex;

　　// flex-flow: row-reverse;

　　transform: rotateZ(180deg);

　　}

　　z軸旋轉(zhuǎn)180deg之后發(fā)現(xiàn)星星的頭跟尾巴反過來了，那么子元素也旋轉(zhuǎn)180deg即可：

　　.rate-content {

　　input[name="rate"] {

　　transform: rotateZ(180deg);

　　}

　　}

　　需要注意的細(xì)節(jié)

　　input[name="rate"] {

　　// padding-right: 10px;

　　margin-right: 10px;

　　}

以上就是“如何用css實現(xiàn)一個rate評分”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。