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%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
        	background: linear-gradient(90deg, yellow, orange 30% 50%, #184580 50%, 70%, #173a75 100%);
        	background-size: 205% 100%;
        	background-position: 0 0;
        }
        
        label:hover:before {
        	transition: all 0.25s ease 0s;		
        }
        
        input:checked + label ~ label:before {
        	background-position: 100% 0;
        	transition: all 0.25s ease 0s;	
        }
        
        input:checked + label ~ label:hover:before {
        	background-position: 0% 0
        }
        
        
        
        
        
        #rs1:checked ~ .rating-counter:before {
        	content: "1";
        }
        
        #rs2:checked ~ .rating-counter:before {
        	content: "2";
        }
        
        #rs3:checked ~ .rating-counter:before {
        	content: "3";
        }
        
        #rs4:checked ~ .rating-counter:before {
        	content: "4";
        }
     .........完整代码请登录后点击上方下载按钮下载查看