纯css3实现rate评分组件

代码2019-09-061,027 人已阅来源：TONJAY-原创

纯Css3实现的rate评分组件，应该能适配所有平台的高级浏览吧。

原理上较为简单，理解起来也不难。整体思路上主要是对于Css3的选择器+~:checked的灵活应用，为了方便基础弱的同学理解，我在Css里面写了注释说明，看一下就会明白的。

在此也十分强烈推荐朋友们了解一下其它的两篇相关知识点：

具体实际请运行以下代码吧

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=Copyright content=Tencent>
    <meta http-equiv=X-UA-Compatible content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯css3实现rate评分组件-www.tonjay.com</title>
</head>
<style>
    * {font-family:-apple-system,SF UI Text,PingFang SC,Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;}
    body{background: #eee;}
    .demo{ padding: 20px; background: #fff; text-align: center; border-radius: 6px; width: 400px; margin: 60px auto 0;}
    .star{ display: flex; justify-content: flex-start;}
    .star .inlineBox{ display: flex; position:relative;}
    .inlineBox input{ position: absolute; opacity: 0; z-index: -1;}
    .inlineBox label{ width: 30px; height: 30px; cursor: pointer; }
    /* ▼ 默认全部为实心星 */
    .inlineBox label::after{ content: ""; display: block; transition: transform ease .3s; width: 100%; height: 100%;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='782' height='391' viewBox='0 0 782 391'%3E%3Cg transform='translate(-401 -521)'%3E%3Crect width='391' height='391' transform='translate(401 521)' fill='%23cb8585' opacity='0'/%3E%3Crect width='391' height='391' transform='translate(792 521)' fill='%23ffafaf' opacity='0'/%3E%3Cpath d='M72.626,326.105A10.5,10.5,0,0,1,57.39,315.034l16.75-97.663L3.184,148.206A10.5,10.5,0,0,1,9,130.294l98.058-14.25,43.853-88.856a10.5,10.5,0,0,1,18.836,0L213.6,116.044l98.059,14.25a10.5,10.5,0,0,1,5.82,17.912l-70.956,69.165,16.751,97.663A10.5,10.5,0,0,1,248.038,326.1l-87.705-46.11L72.626,326.105Z' transform='translate(826.999 542.665)' fill='%23ecb500'/%3E%3Cpath d='M155.446,258.834a10.5,10.5,0,0,1,9.774,0l73.758,38.777-14.086-82.13a10.5,10.5,0,0,1,3.02-9.3l59.674-58.166L205.12,136.036a10.5,10.5,0,0,1-7.906-5.745l-36.88-74.723-36.88,74.727a10.5,10.5,0,0,1-7.906,5.745L33.082,148.02l59.672,58.166a10.5,10.5,0,0,1,3.02,9.3l-14.086,82.13,73.758-38.777Zm-82.82,67.271A10.5,10.5,0,0,1,57.39,315.034l16.75-97.663L3.184,148.206A10.5,10.5,0,0,1,9,130.294l98.058-14.25,43.853-88.856a10.5,10.5,0,0,1,18.836,0L213.6,116.044l98.059,14.25a10.5,10.5,0,0,1,5.82,17.912l-70.956,69.165,16.751,97.663A10.5,10.5,0,0,1,248.038,326.1l-87.705-46.11L72.626,326.105Z' transform='translate(435.999 542.665)' fill='%23ecb500'/%3E%3C/g%3E%3C/svg%3E") right center no-repeat; background-size: auto 100%;}
    /* ▼ 设置星级说明文字位置 */
    .inlineBox label::before{ position: absolute; white-space: nowrap; left:100%; line-height: 30px; pointer-events: none; margin-left: 10px;}
    /* ▼ 设置当前选中状态为实心星*/
    .inlineBox input:checked+label::after{ background-position: right center;}
    /* ▼ 输出默认值的说明文字 */
    .inlineBox input:checked+label::before{ content: attr(title);}
    /* ▼ 将当前值后边的所有状态为空心星 */
    .inlineBox input:checked+label ~ label::after{background-position: left center;}
    /* ▼ 以下为鼠标经过时的效果，可以自己思考一下 */
    .inlineBox:hover input + label::before{ content: "";}
    .inlineBox:hover label:hover::before{ content:attr(title); }
    .inlineBox:hover label::after{ background-position: right center!important;}
    .inlineBox:hover label:hover ~ label::after{background-position:left center!important;}
    .inlineBox:hover label:hover::after{background-position:right center; transform: scale(1.3);}
</style>
<body>
    <div class="demo">
        <div class="star">
            <div class="inlineBox">
                <input type="radio" id="item-1" name="tonjay" checked>
                <label class="" for="item-1" title="1分差评"></label>
                <input type="radio" id="item-2" name="tonjay">
                <label class="" for="item-2" title="2分差评"></label>
                <input type="radio" id="item-3" name="tonjay">
                <label class="" for="item-3" title="3分中评"></label>
                <input type="radio" id="item-4" name="tonjay">
                <label class="" for="item-4" title="4分好评"></label>
                <input type="radio" id="item-5" name="tonjay">
                <label class="" for="item-5" title="5分好评"></label>
            </div>
        </div>
    </div>
</body>
</html>

相关内容

浏览更多有关 的内容