web前端入門到實戰(zhàn):僅3行核心css代碼的rate評分組件妻枕,秀到頭皮發(fā)麻

css實現(xiàn)一個rate評分 ? 核心代碼也就三行

效果圖

原理

梳理如下:

  1. 去找個好看的iconfont,[Iconfont-阿里巴巴矢量圖標庫]、屡谐;
  2. 借用5個radio單選框述么,把默認樣式都去掉,顯示默認的星星愕掏;
  3. checked偽類監(jiān)聽用戶選中?度秘,由默認的星星變成高亮的星星;
  4. 然后配合~兄弟操作符把當前選中的所有兄弟元素都一起高亮??饵撑;
  5. 把5個radio單選框反向排列 ?剑梳;

代碼

這是我事先生成好的iconfont

<link rel="stylesheet" >

一個很簡潔的布局:

<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>
web前端開發(fā)學習Q-q-u-n: 731771211,分享學習的方法和需要注意的小細節(jié)滑潘,不停更新最新的教程和學習方法(詳細的前端項目實戰(zhàn)教學視頻)

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

// 去掉默認樣式
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; // 加點顏色過渡效果
    }
  }
}

效果如下:

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

input[name="rate"] {
  // 高亮的星星
  &:checked {
    &::after {
      content: "\e73c";
      color: $main;
    }
  }
}

效果如下:

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

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"] {
    ...
  }
}
web前端開發(fā)學習Q-q-u-n: 731771211垢乙,分享學習的方法和需要注意的小細節(jié),不停更新最新的教程和學習方法(詳細的前端項目實戰(zhàn)教學視頻)

效果如下:

然后把input反向排列:

.rate-content {
  display: flex;
  flex-flow: row-reverse;
}

效果如下:

鼠標移入預(yù)覽選中效果:

羅嗦版:

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"],
  &:hover,
  &:hover ~ input[name="rate"] {
    ...
  }
}

優(yōu)化版:

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);
  }
}

效果如下:

總結(jié)

核心代碼其實就是這兩段语卤,其他都是可選的??

元素反向排列:

display: flex;
flex-flow: row-reverse;

兄弟元素操作:

input:checked ~ input

如果不用flex反向排列追逮,還可以用rotateZ:

.rate-content {
  display: flex;
  // flex-flow: row-reverse;
  transform: rotateZ(180deg);
}
web前端開發(fā)學習Q-q-u-n: 731771211,分享學習的方法和需要注意的小細節(jié)粹舵,不停更新最新的教程和學習方法(詳細的前端項目實戰(zhàn)教學視頻)

效果如下:

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

.rate-content {
  input[name="rate"] {
    transform: rotateZ(180deg);
  }
}

效果如下:

需要注意的細節(jié)

input[name="rate"] {
  // padding-right: 10px;
  margin-right: 10px;
}

如果用外邊距的話,那么會出現(xiàn)以下情形:

內(nèi)邊距的作用是保持元素連貫性以及擴大點擊范圍??眼滤,最后附上本文代碼的codepen地址:css實現(xiàn)rate評分點擊預(yù)覽

最后

本文到此結(jié)束巴席,希望以上內(nèi)容對你有些許幫助,如若喜歡請記得點個關(guān)注哦 ??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柠偶,一起剝皮案震驚了整個濱河市情妖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌诱担,老刑警劉巖毡证,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蔫仙,居然都是意外死亡料睛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門摇邦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來恤煞,“玉大人,你說我怎么就攤上這事施籍【影牵” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵丑慎,是天一觀的道長喜喂。 經(jīng)常有香客問我瓤摧,道長,這世上最難降的妖魔是什么玉吁? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任照弥,我火速辦了婚禮,結(jié)果婚禮上进副,老公的妹妹穿的比我還像新娘这揣。我一直安慰自己,他們只是感情好影斑,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布给赞。 她就那樣靜靜地躺著,像睡著了一般鸥昏。 火紅的嫁衣襯著肌膚如雪塞俱。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天吏垮,我揣著相機與錄音障涯,去河邊找鬼。 笑死膳汪,一個胖子當著我的面吹牛唯蝶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播遗嗽,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼粘我,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了痹换?” 一聲冷哼從身側(cè)響起征字,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎娇豫,沒想到半個月后匙姜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡冯痢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年氮昧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浦楣。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡袖肥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出振劳,到底是詐尸還是另有隱情椎组,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布历恐,位于F島的核電站寸癌,受9級特大地震影響选调,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜灵份,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哮洽。 院中可真熱鬧填渠,春花似錦、人聲如沸鸟辅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匪凉。三九已至枪眉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間再层,已是汗流浹背贸铜。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留聂受,地道東北人蒿秦。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像蛋济,于是被迫代替她去往敵國和親棍鳖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容

  • (這是15年初學css時記的筆記) 選擇器 簡單選擇器 標簽選擇器 直接把標簽名加前面碗旅。 類選擇器 用.+ cla...
    burningalive閱讀 956評論 0 0
  • CSS 是什么 css(Cascading Style Sheets)渡处,層疊樣式表,選擇器{屬性:值祟辟;屬性:值}h...
    崔敏嫣閱讀 1,490評論 0 5
  • 一医瘫、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設(shè)定的標簽(元素)”川尖。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,602評論 0 6
  • 1登下、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,640評論 0 7
  • 互聯(lián)網(wǎng)家裝時代的來臨讓人們開始更多地將傳統(tǒng)家裝的行為通過互聯(lián)網(wǎng)的方式進行去中間化被芳,進而達到提升家裝行業(yè)運行效率的目...
    孟永輝閱讀 318評論 0 0