css定位實現星級展示沒有交互

kohoh_ 發布于2019-04-23 13:12 / 3095人閱讀

摘要：效果如圖，通過定位放兩張背景圖，外層的放灰色的顆星圖，內層的也是，寬度根據不同級別來展示，從而實現，代表半顆星，代表顆星，以此類推，即默認比如顆星乘就是的后綴數字，以此可以動態展示要注意這個星星默認為，間距，展示的星星寬度記得計算間距。

<div class="star_evaluate">
       <span class="star star_10">span>
div>

.star_evaluate{
            position: relative;
            display: inline-block;
            width: 100px;
            height:16px;
            background: url("./../../public/img/star_gray.png") no-repeat;
            background-size:cover;
            overflow: hidden;
            .star{
              position: absolute;
              top:0;
              left:0;
              display: inline-block;
              height:16px;
              background: url("./../../public/img/star.png") no-repeat;
              background-size:cover;
              overflow: hidden;
            }
            .star_1{
              width:8px;
            }
            .star_2{
              width:21px;
            }
            .star_3{
              width:29px;
            }
            .star_4{
              width:42px;
            }
            .star_5{
              width:50px;
            }
            .star_6{
              width:63px;
            }
            .star_7{
              width:71px;
            }
            .star_8{
              width:84px;
            }
            .star_9{
              width:92px;
            }
            .star_10{
              width:100px;
            }
          }

效果如圖，通過定位放兩張背景圖，外層的放灰色的5顆星圖，內層的也是，寬度根據不同級別來展示，從而實現，

star_1 ,代表半顆星，star_2 代表1顆星，以此類推，即默認比如2.5顆星乘2就是class的后綴數字，以此可以動態展示

要注意這個星星默認為16px*16px，間距5px，展示的星星寬度記得計算間距。

之前看過網友的實現方式，有通過一個星星平鋪，來顯示的，但是平鋪的這種方式應該是不可以讓星星之間產生間距的，如果有大神有辦法，請一定告訴我，謝謝！

如有寫的不對的地方，還請大家多多指正，感謝查看！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1579.html

純CSS的星級評價效果

摘要：代碼實現一星兩星三星四星五星去掉標簽默認樣式初始化樣式鼠標懸浮精益求精上面我們的星星評分效果已初見成效，但是暴露了一個問題，就是我們的評價機制缺少記憶功能。這里有點不一樣的是每個星星對應一個單選框和一個標簽，的層級要高于單選框。前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評價效果，相信大家這個并不陌生...

lijy91 2019-08-29 12:46 評論0 收藏0
純CSS的星級評價效果

摘要：代碼實現一星兩星三星四星五星去掉標簽默認樣式初始化樣式鼠標懸浮精益求精上面我們的星星評分效果已初見成效，但是暴露了一個問題，就是我們的評價機制缺少記憶功能。這里有點不一樣的是每個星星對應一個單選框和一個標簽，的層級要高于單選框。前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評價效果，相信大家這個并不陌生...

Lin_R 2019-08-01 16:58 評論0 收藏0
PokemonGo：LBS游戲開發

摘要：優化后的方案降低了捕捉門檻，也鼓勵用戶走動去發現和捕捉更多精靈。寫在前面去吧！皮卡丘！小時候擁有一臺任天堂是多少熊孩子的夢想，每個夜晚被窩里透出的微弱光線，把小小的童年帶入另一個世界，家門口的鳥和狗，森林里的蟲和瀑布，山洞里的超音蝠，帶著小小的夢，走過一個個城市，一路冒險，飛天潛水，攀瀑碎巖，所向披靡。每個醒來的清晨，都恍如出門冒險的那天~ 要做什么基于開放地圖二次開發，完成簡易...

daydream 2019-08-22 10:53 評論0 收藏0
PokemonGo：LBS游戲開發

摘要：優化后的方案降低了捕捉門檻，也鼓勵用戶走動去發現和捕捉更多精靈。寫在前面去吧！皮卡丘！小時候擁有一臺任天堂是多少熊孩子的夢想，每個夜晚被窩里透出的微弱光線，把小小的童年帶入另一個世界，家門口的鳥和狗，森林里的蟲和瀑布，山洞里的超音蝠，帶著小小的夢，走過一個個城市，一路冒險，飛天潛水，攀瀑碎巖，所向披靡。每個醒來的清晨，都恍如出門冒險的那天~ 要做什么基于開放地圖二次開發，完成簡易...

Michael_Lin 2019-08-01 17:26 評論0 收藏0