css+js实现星级评分打分点击效果代码-html代码-BFW代码库

css+js实现星级评分打分点击效果代码

代码语言：html

代码描述：css+js实现星级评分打分点击效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

* {
    box-sizing: border-box;
}
:root {
    --dir: 90deg;
    --fill: gold;
    --bgcolor: white;
   
}
body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    font-family: 'Abril Fatface', cursive;
 
}
#container {
    /* background-color: gold; */
    --pc: 0%;
    background: linear-gradient(var(--dir), var(--fill) 0%, var(--fill) var(--pc), var(--bgcolor)var(--pc));
    background-clip: text;
    -webkit-background-clip: text;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


  
}

.stars {
    display: inline;
    color: transparent;
    border: 1px solid;
   
}

.instruct {
    width: 400px;
    text-align: center;
}
.star {
    height: 5rem;
    font-size: 4rem;
    outline: none; 
    border: none;
    /* background-color: var(--bgcolor); */
    cursor: pointer;
    color: transparent;
    -webkit-text-stroke: 2px navy;
    text-stroke: 4px navy;
}
.star p {
    top: -5rem;
}
#score {
	font-size: 2rem;
}
</style>


  
  
</head>

<body>
  <div id="container">   
        <h1>Overall Goodlyness Rating</h1>.........完整代码请登录后点击上方下载按钮下载查看