简单的CSS动画加JS实现转盘

来源：互联网发布：教课程财务会计软件编辑：程序博客网时间：2024/06/05 20:42
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style>.circle {background:#ccc;position: relative;height: 350px;width: 350px;display:inline-block;border-radius: 350px;text-align: center;}.play {animation: mymove 3s forwards ease-in-out;//3s动画}#btn {display:inline-block;margin-top: 125px;margin-left: -225px;position: absolute;height: 100px;width:100px;border-radius:50px;background-color:gray;line-height: 100px;text-align:center;}#btn img {display:inline-block;position: absolute;height: 80px;top:-40px;left: 43px;}</style><style id="animation">/*动态添加动画*/</style>   <body><div class="circle">演示文字，转动</div><div id="btn"><img src="arrow.png" alt="">开始</div><script>var start = document.getElementById('btn');//开始按钮var circle = document.getElementsByClassName('circle')[0];//转盘var flag = 0;//判断有没有点击过按钮var animation = document.getElementById('animation');var sta = 0;   //开始的角度start.addEventListener("click",function() {if(flag == 1) {return ;}circle.className = "play circle";flag = 1;var rand = Math.floor(Math.random() * 1000 ); //1000随机数var res = 0;//最后停留的角度，if(rand >=0 && rand < 5) {//把圆分成了七分，自己看情况算角度res = 25;}if(rand >= 5 && rand < 10) {res = 75;}if(rand >= 10 && rand < 20) {res = 125;}if(rand >= 20 && rand < 70) {res = 175;}if(rand >= 70 && rand < 150) {res = 225;}if(rand >= 150 && rand < 300) {res = 275;}if(rand >= 300 && rand < 1000) {res = 325;}console.log(res);res += 1800;//转5圈animation.innerHTML = "@keyframes mymove{0% {transform:rotate("+sta+"deg)} 100%{transform:rotate(" + res + "deg)}}";sta = res - 1800;setTimeout(function() {flag = 0;circle.className = "circle";circle.style.transform = "rotate("+sta+"deg)";//停留在最后的位置},3000);//初始化，，根据自己的动画时间，设置})</script></body></html>
阅读全文
0 0