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

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

梳理如下：

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

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

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

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

把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 &mdash;&mdash; input[name="rate"] {

...

}

}

效果如下：

然后把input反向排列：

.rate-content {

display: flex;

flex-flow: row-reverse;

}

鼠標移入預覽選中效果：

羅嗦版：

input[name="rate"] {

// 高亮的星星

&:checked,

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

&:hover,

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

...

}

}

優化版：

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 {

...

}

// 鼠標移入使星星放大

&:hover {

transform: scale(1.2);

}

}

總結

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

元素反向排列：

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軸旋轉180deg之后發現星星的頭跟尾巴反過來了，那么子元素也旋轉180deg即可：

.rate-content {

input[name="rate"] {

transform: rotateZ(180deg);

}

}

需要注意的細節

input[name="rate"] {

// padding-right: 10px;

margin-right: 10px;

}

以上就是“如何用css實現一個rate評分”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創新互聯行業資訊頻道。

文章名稱：如何用css實現一個rate評分
分享鏈接：http://m.newbst.com/article28/gpgpcp.html

成都網站建設公司_創新互聯，為您提供App開發、標簽優化、ChatGPT、App設計、關鍵詞優化、搜索引擎優化

廣告

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