<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing: border-box; } .box{ margin: 200px; } .circle_outter{ width: 200px; height: 200px; border: 1px solid; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: antiquewhite; } .circle_inner{ width: 100px; height: 100px; border: 1px solid; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .circle_inner>div{ position: absolute; display: flex; justify-content: center; } .circle_inner>div:nth-child(2){ color:red; transform: rotate(0deg) translate(0px, -75px) rotate(-0deg); } .circle_inner>div:nth-child(3){ color:red; transform: rotate(0deg) translate(75px) rotate(-0deg); } .circle_inner>div:nth-child(4){ color:red; transform: rotate(0deg) translate(0,75px) rotate(-0deg); } .circle_inner>div:nth-child(5){ color:red; transform: rotate(0deg) translate(-75px) rotate(-0deg); } </style> </head> <body> <div class="box"> <div class="circle_outter"> <div class="circle_inner"> <div class="home">#</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </div> <button class="btn">打折</button> <label for="">价格：6699.00</label> </div> <script src="./b.js"></script> <script> function animation(duration,from,to,handler){ let value=from; const speed=(to-from)/duration; const startTime=Date.now(); function _run(){ const t=Date.now()-startTime; if(t>=duration){ value=to; handler(value); return; } value=from+t*speed; handler(value); requestAnimationFrame(_run); } _run(); } const label=document.querySelector('label'); const btn=document.querySelector('.btn'); btn.onclick=function(){ animation(2000,6699,30,(value)=>{ label.textContent=`价格：${value}` }); } </script> </body> </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。