2、点击星星的时候，灰星星变黄星星，顺便把input点击的外边框去掉，巨丑

.star > input:focus + label{
    outline: none;
.star > input:checked~label,
.star > input:focus~label,
.star > input:hover~label{
    background-position: 0 -30px; 
电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com
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{
        transform: scale(1) rotate(0);
        transform: scale(4) rotate(90deg);
        opacity: 0;
    100%{
        transform: scale(1) rotate(0);
        opacity: 0;
OK，按着步骤来，你也可以在你的页面上实现酷炫的星级评分效果咯~