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%, 7.........完整代码请登录后点击上方下载按钮下载查看