css實現星級商戶評分

2021-06-22 23:22:32 字數 537 閱讀 9327

之前看到大眾點評中有星級商戶這樣的標籤感到挺有意思的,就偷偷模仿了下。

其實,大眾點評的星級商戶的樣式並沒有用到什麼複雜的外掛程式,只靠css就能輕鬆的實現,並且可以動態的控制。好了,閒話不說了,先來看看怎麼來做吧。首先,我們需要一張,如下所示:

然後寫下我們所需的樣式

.item-rank-rst

.irr-star0

.irr-star05

.irr-star10

.irr-star15

.irr-star20

.irr-star25

.irr-star30

.irr-star35

.irr-star40

.irr-star05

.irr-star50

再在頁面上寫上我們要用的標籤,這裡我們用div

irr-star35

"' title=''>

這樣就能實現星級評分的效果,如下所示:

改效果的實現原理就是通過css來擷取部分來呈現。

vue實現星級評分

v for item in stararr class item span div export default computed var half this star onstar 半星 if half 0.5 灰色星星 while starclass.length 5 return starcl...

swift 實現星級評分

通過新增形式實現星級打分功能.建立兩個檢視,其中乙個新增灰色星星,另乙個新增橘色星星.橘色星星檢視覆蓋灰色星星檢視,通過修改橘色星星檢視的寬度實現評分的展現.建立乙個繼承於 uiview 的類,作為星級打分的顯示檢視 建立灰色星星檢視,並新增到父檢視.建立橘色星星檢視,新增到父檢視,保證橘色檢視覆蓋...

jquery實現星級評分效果

效果圖如下 很不好 li rating item rating title 不好 li rating item rating title 一般 li rating item rating title 好 li rating item rating title 很好 li ul titletext u...