純CSS製作rate評分

前段時間在掘金看到一個標題是用純CSS製作rate評分,然後自己就去想了一下,試了一下做了一個效果是做出來了,但代碼好像有點…有待優化哈哈哈。後來回頭點進去那位大哥是用SASS寫的，發現確實秀。

那麼先說一下我的代碼的 實現思路
首先運用input的radio來做點擊，然後使用選擇符 “~”，獲取當前選中的後面的所有同輩元素，給後面同輩的元素添加樣式。

具體是我是先用一個盒子把5個input和裝着5個心的div包裹起來，然後div要在input的後面，因爲配合後面使用選擇符“~”；下面是html代碼

<section id="box">
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
</section>

然後下面是佈局，讓 input 實現 絕對定位，然後讓 div左浮動，放大input的選擇框，讓每個input定位到對應的每個div的上面，然後使用透明度將 input透明設爲0，由於使用選擇符“~”所以選中的評分是反方向的，所以需要把它翻轉過來，使用 transform: rotateY(180deg)翻轉 過來；

下面是css代碼

* {
    margin: 0;
    padding: 0;
}
#box {
    top:100px;
    right: 50%;
    transform: rotateY(180deg);
    position: relative;
}
div {
    font-size: 32px;
    line-height: 32px;
    float: left;
    color: wheat;
}
input {
    position: absolute;
    top: 0;
    left: 10px;
    transform: scale(2) translateY(40%);
    opacity: 0;
    cursor: pointer;
}
input:nth-of-type(2){
    left: calc(7px + 32px);
}
input:nth-of-type(3){
    left: calc(7px + 64px);
}
input:nth-of-type(4){
    left: calc(7px + 96px);
}
input:nth-of-type(5){
    left: calc(7px + 128px);
}
input[name='rate']:hover ~ div,
input[name='rate']:checked ~ div{
    color: red; 
}

看了那位大哥的代碼後整個人都自閉了，覺得自己的好row啊 [捂臉]；
那麼附上那位大哥用SASS寫的（https://juejin.im/entry/5d5a420cf265da03913514fd），確實是秀！
覺得壓力好大啊，現在的人都這麼的優秀的嘛，自閉了。加油吧~~