css的has属性实现radio星级评分效果代码-html代码-BFW代码库

css的has属性实现radio星级评分效果代码

代码语言：html

代码描述：css的has属性实现radio星级评分效果代码

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

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

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

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

:root {
  --tran: all 0.5s ease 0s;
  --dark: #1c2429;
  --back: #1d659f;
}

* { outline: none; }

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient( circle at 50% 50%, var(--back), #11114e);
}


.star:hover,
.star:has(~ .star:hover),
.star:has(:checked),
.star:has(~ .star :checked) {
  --star: #ffd900;
}

.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
  --star: #1c619c;
}


.number:hover ~ .star:has(~ .star :checked):after,
.number:hover ~ .star:has(:checked):after,
.star:hover ~ .star:has(~ .star :checked):after,
.star:hover ~ .star:has(:checked):after {
  -webkit-clip-path: polygon(28% 55%, 2% 41%, 30% 31%, 36% 1%, 53% 24%, 28% 55%, 35% 62%, 68% 44%, 98% 52%, 73% 68%, 75% 99%, 52% 80%, 24% 91%, 35% 62%);
          clip-path: polygon(28% 55%, 2% 41%, 30% 31%, 36% 1%, 53% 24%, 28% 55%, 35% 62%, 68% 44%, 98% 52%, 73% 68%, 75% 99%, 52% 80%, 24% 91%, 35% 62%);
}


.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
  background: var(--dark);
  transition: all 0.1s ease 0s;
  transition: var(--tran);
}


.star:has(:checked) {
  transform: scale(1.25);
  transition-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

.star-rating {
  padding: 2vmin 10vmin 2.25vmin 4vmin;
  border-radius: 10vmin;
  font-size: 5vmin;
  position: relative;
  background: var(--dark);
}

.stars {
  display: flex;
}

.star {
  display: grid;
  place-items: center;
  padding: 1vmin;
  cursor: pointer;
  transition: var(--tran);
  background: radial-gradient(circle at 50% 50%, #1c5e98 1vmin, #fff0 calc(1vmin + 1px) 100%);
}

.star input,
.star::before,
.star::after {
  grid-area: star;
  width: 5vmin;
  height: 5vmin;
  margin: 0 0.5vmin;
}

.star [type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.star::before,
.star::after {
  content: "";
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
          clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

.star::after {
  transition: all ease-in-out 130ms;
  width: calc(100% - 0.25vmin);
  height: calc(100% - 0.25vmin);
  background: var(--star);
}



.number-rating:before {
  content: "0";
  font-family: 'Days One', sans-serif;
  display: grid;
  place-items: center;
  background: #ffd900;
  color: var(--dark);
  position: absolute;
  margin-top: -.........完整代码请登录后点击上方下载按钮下载查看