純css實現星級評分效果

效果

效果圖如下，純css實現超酷炫的星級評分動畫效果

​

實現思路

1. 5個類型為radio的input，label標簽修改樣式背景圖為星星
2. label標簽給每個星星滑鼠停留時加註名字
3. 點擊星星有放大旋轉的動畫

dom結構

用form實現

<form>
    <div class="star">
        <input type="radio" id="rate5" name="rating" value="5">
        <label for="rate5" title="Amazing"></label>

        <input type="radio" id="rate4" name="rating" value="4">
        <label for="rate4" title="Good"></label>

        <input type="radio" id="rate3" name="rating" value="3">
        <label for="rate3" title="Average"></label>

        <input type="radio" id="rate2" name="rating" value="2">
        <label for="rate2" title="Not good"></label>

        <input type="radio" id="rate1" name="rating" value="1">
        <label for="rate1" title="Terrible"></label>
    </div>
</form>

css樣式

css按步驟來實現，

1、星星圖片樣式

首先是星星圖片嘛~

​

.star{
    display: block;
    position: relative;
    width: 150px;
    height: 60px;
    padding: 0;
    border: none;
}

.star > input{
    position: absolute;
    margin-right: -100%;
    opacity: 0;
}

.star > label{
    position: relative;
    display: inline-block;
    float: right;
    width: 30px;
    height: 30px;
    color: transparent;
    background-image: url("../rotate-star/images/starIcon.png");
    background-repeat: no-repeat;
}

2、點擊星星的時候，灰星星變黃星星，順便把input點擊的外邊框去掉，巨醜

.star > input:focus + label{
    outline: none;
}

.star > input:checked~label,
.star > input:focus~label,
.star > input:hover~label{
    background-position: 0 -30px; 
}

3、通過before偽元素，新增一個隱藏著的星星，來做旋轉放大的動畫

.star > label:before{
    display: none;
    position: absolute;
    content: " ";
    width: 30px;
    height: 30px;
    background-image: url("../rotate-star/images/starIcon.png");
    background-repeat: no-repeat;
    bottom: 0;
}

.star > input:checked + label:before{
    display: block;
    animation-name: rotateStar;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateStar{
    0%{
        transform: scale(1) rotate(0);
    }

    95%{
        transform: scale(4) rotate(90deg);
        opacity: 0;
    }

    100%{
        transform: scale(1) rotate(0);
        opacity: 0;
    }
}

OK，按著步驟來，你也可以在你的頁面上實現酷炫的星級評分效果咯~