成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css定位實現(xiàn)星級展示沒有交互

kohoh_ / 3098人閱讀

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

<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顆星圖，內(nèi)層的也是，寬度根據(jù)不同級別來展示，從而實現(xiàn)，

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

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

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

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

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1579.html

相關(guān)文章

  • 純CSS的星級評價效果

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

    lijy91 評論0 收藏0

  • 純CSS的星級評價效果

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

    Lin_R 評論0 收藏0

  • PokemonGo：LBS游戲開發(fā)

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

    daydream 評論0 收藏0

  • PokemonGo：LBS游戲開發(fā)

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

    Michael_Lin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<