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

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

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、成都做網(wǎng)站、沂南網(wǎng)絡(luò)推廣、成都小程序開發(fā)、沂南網(wǎng)絡(luò)營銷、沂南企業(yè)策劃、沂南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供沂南建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

梳理如下：

去找個好看的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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：如何用css實現(xiàn)一個rate評分
分享鏈接：http://muchs.cn/article28/gpgpcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、標(biāo)簽優(yōu)化、ChatGPT、App設(shè)計、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)