gsap实现星级评价动画效果-html代码-BFW代码库

代码语言：html

代码描述：gsap实现星级评价动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.rating {
  --default: #8A91B4;
  --active: #FDCF10;
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
}
.rating li {
  --star-before-r: 0;
  --star-before-y: 0;
  --star-after-r: 0;
  --star-after-y: 0;
  --star-o: 1;
  --star-blur: 0;
  padding: 0 4px;
}
.rating li:hover {
  --color: var(--active);
  --dot-scale: 1;
}
.rating li:hover ~ li {
  --color: var(--active);
  --dot-scale: 1;
}
.rating li.active {
  --star-scale: 1;
  --dot-duration: 0s;
}
.rating li.activeColor {
  --color: var(--active);
}
.rating li button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: scale(var(--scale, 1));
          transform: scale(var(--scale, 1));
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.rating li button:active {
  --scale: .8;
}
.rating li button:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--color, var(--default));
  -webkit-transform: scale(var(--dot-scale, 0.8)) translateZ(0);
          transform: scale(var(--dot-scale, 0.8)) translateZ(0);
  -webkit-transition: background 0.25s, -webkit-transform var(--dot-duration, 0.25s);
  transition: background 0.25s, -webkit-transform var(--dot-duration, 0.25s);
  transition: background 0.25s, transform var(--dot-duration, 0.25s);
  transition: background 0.25s, transform var(--dot-duration, 0.25s), -webkit-transform var(--dot-duration, 0.25s);
}
.rating li button .star {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: var(--star-o);
  -webkit-filter: blur(calc(var(--star-blur) * 1px));
          filter: blur(calc(var(--star-blur) * 1px));
  -webkit-transform: translateY(calc(var(--star-y, 0) * 1px)) scale(var(--star-scale, 0)) translateZ(0);
          transform: translateY(calc(var(--star-y, 0) * 1px)) scale(var(--star-scale, 0)) translateZ(0);
}
.rating li button .star:before, .rating li button .star:after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: translateY(calc(var(--y, var(--star-before-y)) * 1px)) rotate(calc(var(--r, var(--star-before-r)) * 1deg)) translateZ(0);
          transform: translateY(calc(var(--y, var(--star-before-y)) * 1px)) rotate(calc(var(--r, var(--star-before-r)) * 1deg)) translateZ(0);
  background: var(--color, var(--default));
  -webkit-transition: background .25s;
  transition: background .25s;
}
.rating li button .star:before {
  -webkit-clip-path: polygon(50% 5%, 65% 35%, 30% 60%, 2.5% 40%, 35% 35%);
          clip-path: polygon(50% 5%, 65% 35%, 30% 60%, 2.5% 40%, 35% 35%);
}
.rating li button .star:after {
  --r: var(--star-after-r);
  --y: var(--star-after-y);
  -webkit-clip-path: polygon(65% 35%, 97.5% 40%, 70% 60%, 80% 95%, 50% 74%, 20% 95%, 30% 60%);
          clip-path: polygon(65% 35%, 97.5% 40%, 70% 60%, 80% 95%, 50% 74%, 20% 95%, 30% 60%);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  font-family: 'Inter', Arial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #ECEFFC;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;.........完整代码请登录后点击上方下载按钮下载查看