css和input实现评分的星星

HTML的部分：

   <div class="rate-content" style="width:150px">

            <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>

 

css部分：

//先去隐藏input

input {

    -webkit-appearance: none;

    border: none;

    outline: none;

    cursor: pointer;

}

//默认星星的颜色

.rate-content {

    display: flex;

    flex-flow: row-reverse;

    $main: #ffa8ff;

    $basic: #999;

    input[name="rate"] {

    font-family: "iconfont";

    font-size: 30;

    margin:0 10px;

        &::after {

            content: "\e645";

            color: $basic;

            transition: color .4s ease;

        }

    }

    input[name="rate"] {

        transition: transform .2s ease; // 加入过渡效果

     // 高亮的星

        &:checked,

        &:hover {

            &::after {

                content: "\e73c";

                color: $main;

            }

            & ~ input[name="rate"] {

                &::after {

                    content: "\e73c";

                    color: $main

                }

            }

        }

//hover 放大     

   &:hover {

            transform: scale(1.2);

        }

    }

}