css实现带数字分值显示星级评分效果代码-html代码-BFW代码库

css实现带数字分值显示星级评分效果代码

代码语言：html

代码描述：css实现带数字分值显示星级评分效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
                margin: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #11114e;
                background: radial-gradient( circle at 50% 100%, #1d659f, #11114e);     
        }
        
        body * {
            box-sizing: border-box;
        }
        
        .rating-stars {
                display: block;
                width: 50vmin;
                padding: 1.75vmin 10vmin 2vmin 3vmin;
                background: linear-gradient(90deg, #ffffff90 40vmin, #fff0 40vmin 100%);
                border-radius: 5vmin;
                position: relative;
        }
        
        .rating-counter {
                font-size: 5.5vmin;
            font-family: Arial, Helvetica, serif;
            color: #9aacc6;
            width: 10vmin;
            text-align: center;
            background: #0006;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            border-radius: 0 5vmin 5vmin 0;
            line-height: 10vmin;
        }
        
        .rating-counter:before {
                content: "0";
                transition: all 0.25s ease 0s;  
        }
        
        
        
        input { display: none; }
        
        label {
                width: 5vmin;
                height: 5vmin;
                background: #000b;
                display: inline-flex;
                cursor: pointer;
                margin: 0.5vmin 0.65vmin;
                transition: all 1s ease 0s;     
                clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
        }
        
        label[for=rs0] {
                display: none;
        }
        
        label:before {
                width: 90%;
                height: 90%;
                content: "";
                background: orange;
                z-index: -1;
                display: block;
                margin-left: 5%;
                margin-top: 5%;
                clip-path: polygon(50% 0%, 6.........完整代码请登录后点击上方下载按钮下载查看