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