星星评分

下载代码

html

css

分享到微信朋友圈

html

css

.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;
}

JavaScript

document.querySelectorAll('.rating').forEach(rating => {

let entries = rating.querySelectorAll('li')

entries.forEach(function(entry, index) {

entry.addEventListener('click', e => {

let active = [...entries].filter((e, i) => i >= index && !e.classList.contains('active')),
                inactive = [...entries].filter((e, i) => i < index && e.classList.contains('active'))

if(active.length) {
                gsap.to(active.reverse(), {
                    onStart() {
                        this._targets.forEach(e => e.classList.add('active', 'activeColor'))
                    },
                    keyframes: [{
                        '--star-scale': 0,
                        '--star-y': 0,
                        duration: 0
                    }, {
                        '--star-scale': 1,
                        '--dot-scale': 0,
                        duration: .9,
                        ease: 'elastic.out(1, .7)',
                        stagger: .03
                    }]
                })
            }

if(inactive.length) {
                gsap.to(inactive, {
                    onStart() {
                        this._targets.forEach(e => e.classList.remove('activeColor'))
                    },
                    onComplete() {
                        this._targets.forEach(e => e.classList.remove('active'))
                    },
                    '--star-before-r': -20,
                    '--star-before-y': -8,
                    '--star-after-r': 20,
                    '--star-after-y': 8,
                    duration: .65,
                    clearProps: true
                })
                gsap.to(inactive, {
                    '--star-o': 0,
                    '--star-blur': 10,
                    '--star-y': 48,
                    '--dot-scale': .8,
                    duration: .5,
                    delay: .15,
                    clearProps: true
                })
            }

})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg