溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下如何用css實現一個rate評分的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
梳理如下：
去找個好看的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 —— 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;
}
以上就是“如何用css實現一個rate評分”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
