div+css实现三维五角星星级评分打分点击显示数值效果代码-html代码-BFW代码库

div+css实现三维五角星星级评分打分点击显示数值效果代码

代码语言：html

代码描述：div+css实现三维五角星星级评分打分点击显示数值效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
        --tb: #ffffff40;
        --tbh: #ffffff70;
        --tran: all 0.5s ease 0.1s;     
}               

body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #11114e;
        perspective: 150vmin;
        background: radial-gradient( circle at 50% 100%, #1d659f, #11114e);     
}

body * {
        box-sizing: border-box;
        transform-style: preserve-3d;
}

.rating-stars {
        display: block;
        width: 65vmin;
        padding: 3vmin;
        border-radius: 5vmin;
        position: relative;
        display: flex;
        justify-content: center;
        transform: rotateX(15deg);
}

input { display: none; }

label {
        width: 10vmin;
        height: 10vmin;
        cursor: pointer;
        margin: 0.5vmin 1.5vmin;
        transition: var(--tran);
        transition-delay: 0s;
        position: relative;
}

label:before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "\2605";
        z-index: 2;
        font-size: 11vmin;
        line-height: 11vmin;
        color: #b1ddff;
        text-align: center;
        transform: translateY(0vmin);
        transition: var(--tran);
        text-shadow: 
                1px 1px 1px var(--tb), 
                -1px -1px 1px var(--tb), 
                -1px 0px 1px var(--tb), 
                1px 0px 1px var(--tb),          
                0vmin 0.1vmin 1px #1d8be1, 
                0vmin 0.1vmin 1px #1d8be1, 
                0vmin 0.2vmin 1px #1b81d1, 
                0vmin 0.2vmin 1px #1b81d1, 
                0vmin 0.3vmin 1px #1972b7, 
                0vmin 0.3vmin 1px #1972b7, 
                0vmin 0.4vmin 1px #1a76bd, 
                0vmin 0.4vmin 1px #1a76bd, 
                0vmin 0.5vmin 1px #196fb1, 
                0vmin 0.5vmin 1px #196fb1, 
                0vmin 0.6vmin 1px #1868a5, 
                0vmin 0.6vmin 1px #1868a5, 
                0vmin 0.7vmin 1px #155f97, 
                0vmin 0.7vmin 1px #155f97, 
                0vmin 0.8vmin 1px #125689, 
                0vmin 0.8vmin 1px #125689, 
                0vmin 0.9vmin 1px #104e7d, 
                0vmin 0.9vmin 1px #104e7d, 
                0vmin 1.0vmin 1px #104975, 
                0vmin 1.1vmin 1px #104975, 
                0vmin 1.1vmin 1px #0e4169, 
                0vmin 1.2vmin 1px #0e4169, 
                0vmin 1.2vmin 1px #0c395d, 
                0vmin 1.3vmin 1px #0c395d, 
                0vmin 1.3vmin 1px #0a3151, 
                0vmin 1.4vmin 1px #0a3151, 
                0vmin 1.4vmin 1px #092c49, 
                0vmin 1.5vmin 1px #092c49, 
                0vmin 1.5vmin 1px #072239, 
                0vmin 1.6vmin 1px #072239, 
                0vmin 1.6vmin 3px #00000020;
        filter: drop-shadow(0px 5px 10px #008dff) drop-shadow(0px 5px 30px #008dff);            
}

label:hover:before {
        color: #e2f2ff;
        filter: drop-shadow(0px 5px 15px #b1ddff) drop-shadow(0px 5px 30px #b1ddff);
}




/*** unchecked:before ***/
input:checked + label ~ label:before, 
input:checked + label ~ label:hover:active:before {
        transition: var(--tran);
        color: #ffedb9;
        color: #18242f;
        transform: translateY(1.5vmin);
        filter: none;
        text-shadow: 
                1px 1px 1px var(--tbh), 
                -1px -1px 1px var(--tbh), 
                -1px 0px 1px var(--tbh), 
                1px 0px 1px var(--tbh), 
                0vmin 0.01v.........完整代码请登录后点击上方下载按钮下载查看