js+css实现冒火燃烧火苗的星际评分打分动画效果代码
代码语言:html
所属分类:星级评分
代码描述:js+css实现冒火燃烧火苗的星际评分打分动画效果代码,鼠标点击后不要松开就能让火苗燃烧起来。
代码标签: js css 冒火 星际 评分 打分 动画 火苗
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; background-color: #990000; } body { display: flex; justify-content: center; align-items: center; position: relative; background: radial-gradient(circle, #f05900 0%, #990000 100%); } .rating { display: flex; list-style-type: none; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0.5em; } .rating li { font-size: 64px; pointer-events: none; padding: 0.2em; position: relative; mix-blend-mode: screen; } .rating li::before { position: absolute; width: 140%; height: 120%; background-image: url(//repo.bfw.wiki/bfwrepo/images/fire.webp); background-size: 100% 100%; content: ""; left: 50%; top: 0; transform-origin: center bottom; transform: translate(-51%, -65.5%) scaleY(0); opacity: 0; transition: opacity 0.7s, transform 0.7s; z-index: -1; backface-visibility: hidden; } .rating li.a { color: #fc0; } .rating.a li.a::before { opacity: 1; transform: translate(-51%, -65.5%) scaleY(1); } </style> </head> <body> <ul id="rating" class="rating"> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> </ul> <script> const normalize = (va, mi, ma) => (va - mi) / (ma - mi), interpolate = (no, mi, ma) => mi + (ma - mi) * no, map = (va, mi1, ma1, mi2, ma2) => interpolate(normalize(va, mi1, ma1), mi2, ma2), ratingEl = document.getElementById('rating'), STATUS_IDLE = 'idle', STATUS_DRAG = 'drag'; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0