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

gsap实现星级评价动画效果

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