3D效果的五星和心形评分界面

2014-05-01 06:16:56 -0700

此代码仅供参考

代码说明

stars & heart rating

html代码

<section id="rate" class="rating">
    
    <input type="radio" id="star_5" name="rate" value="5" />
    <label for="star_5" title="Five">&#9733;</label>
    
    <input type="radio" id="star_4" name="rate" value="4" />
    <label for="star_4" title="Four">&#9733;</label>
    
    <input type="radio" id="star_3" name="rate" value="3" />
    <label for="star_3" title="Three">&#9733;</label>
    
    <input type="radio" id="star_2" name="rate" value="2" />
    <label for="star_2" title="Two">&#9733;</label>
    
    <input type="radio" id="star_1" name="rate" value="1" />
    <label for="star_1" title="One">&#9733;</label>
</section>

<section id="like" class="rating">
    
    <input type="radio" id="heart_5" name="like" value="5" />
    <label for="heart_5" title="Five">&#10084;</label>
    
    <input type="radio" id="heart_4" name="like" value="4" />
    <label for="heart_4" title="Four">&#10084;</label>
    
    <input type="radio" id="heart_3" name="like" value="3" />
    <label for="heart_3" title="Three">&#10084;</label>
    
    <input type="radio" id="heart_2" name="like" value="2" />
    <label for="heart_2" title="Two">&#10084;</label>
    
    <input type="radio" id="heart_1" name="like" value="1" />
    <label for="heart_1" title="One">&#10084;</label>
</section>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N