css常用效果——点赞点评效果

之前自己写过rate评分的效果，都是UI给的雪碧图，然后自己拼凑，所以这次我研究了一下用纯css来实现评分效果。

效果图

引入阿里图表库

 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">

dom结构

 <div class="rate-content">
        <input type="radio" name="rate" value="1">
        <input type="radio" name="rate" value="2">
        <input type="radio" name="rate" value="3">
        <input type="radio" name="rate" value="4">
        <input type="radio" name="rate" value="5">
    </div>

画默认的星星

 		/* 去掉默认样式 */
        input {
            -webkit-appearance: none;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .rate-content {
            /* 高亮颜色 */
            --colorActive: #ffa822;
            /* 默认颜色 */
            --colorDefault: #999;
            width: 300px;
        }

        /* 单个星星 */
        .rate-content input[name="rate"] {
            font-family: "iconfont";
            /* 之前引入的iconfont字体 */
            font-size: 30px;
            overflow: hidden;
        }

        /* 默认显示的星星 */
        .rate-content input::after {
            content: "\e645";
            color: var(--colorDefault);
            /* 加点颜色过渡效果 */
            transition: color .4s ease;
        }

效果图如下：

实现选中单个星星

.rate-content input[name="rate"]:checked::after {
     /* 高亮的星星 */
     content: "\e73c";
     color: var(--colorActive);
}

效果图如下：

连同兄弟一起选中

/*单个的选中效果*/
.rate-content input[name="rate"]:checked::after,
/*连同剩下的兄弟一起选中*/
.rate-content input[name="rate"]:checked~input[name="rate"]::after {
      content: "\e73c";				  	 
      color: var(--colorActive);
}

效果图如下：

将input反向排列

鼠标移入预览效果

.rate-content input[name="rate"]:checked::after,
.rate-content input[name="rate"]:checked~input[name="rate"]::after,
/*单个的鼠标移入效果*/
.rate-content input[name="rate"]:hover::after,
/*连同剩下的兄弟一起*/
.rate-content input[name="rate"]:hover~input[name="rate"]::after {
       /* 高亮的星星 */
       content: "\e73c";
       color: var(--colorActive);
}

效果图如下:

星星的放大效果

/*移入放大*/
.rate-content input[name="rate"]:hover {
      transform: scale(1.2);
} 

效果图如下：