当前位置：首页 > Web前端 > CSS

vue+CSS3实现轮播抽奖

时间：2023-03-30 14:33:48 CSS

最近需要一个轮播抽奖。搜索了现有的轮子，有的是用jQuery动画函数实现的，有的是用canvas绘制然后用高频setTimeout调用旋转方法的。前者太老了，不容易移植到vue项目，后者感觉性能可能不太好。还有一些css动画方案，设计加速-匀速-减速三个动画，然后计算偏角让三个动画尽可能无缝衔接，不过感觉应该有更简单轻便的实现方案.个人比较喜欢用transition来实现，但是网上的例子感觉不够好，有些倾斜的文字没有对齐，所以最后自己写了一个。无需jQuery，无需js脚本实现动画细节，动画效果完全连续无连接，支持动态设置任意数量的2个以上奖项。核心思想是利用transition和rotate实现旋转动画，利用transition-origin和rotate绘制定位更精准的轮盘奖励。代码及实例展示奖号：{{prizeNumber}}添加2&&(prizeNumber--)":disabled="rolling||prizeNumber===2">删除开始

{{item.name}}

html{背景：#DD7C7D;}.wheel-wrapper{宽度：300px;高度：300px；位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}.wheel-pointer{宽度：60px；高度：60px；边界半径：1000px；背景：黄色；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；文本对齐：居中；行高：60px；z-指数：10；}.wheel-bg{宽度：100%；高度：100%；边界半径：1000px；溢出：隐藏；过渡：变换4s缓入缓出；背景：#7EEF97；&.freeze{过渡：无；背景：红色；}}.prize-list{宽度：100%；高度：100%；位置：相对；文本对齐：居中；}.prize-item-wrapper{位置：绝对；顶部：0；左：50%；转换：translateX(-50%)；宽度：150px；高度：150px；}.prize-item{宽度：100%；高度：100%；变换原点：底部；.prize-name{padding:16px0;}.prize-icon{}}varMain={data(){return{freeze:false,rolling:false,wheelDeg:0,prizeNumber:8,prizeListOrigin:[{icon:"https://picsum.photos/40?random=1",name:"$10000"},{icon:"https://picsum.photos/40?random=6",name:"谢谢！"},{图标:"https://picsum.photos/40?random=2",名称:"500"},{图标:"https://picsum.photos/40?random=3",name:"$100"},{icon:"https://picsum.photos/40?random=6",name:"谢谢！"},{图标:"https://picsum.photos/40?random=4",名称:"50"},{图标:"https://picsum.photos/40?random=5",名称:"$10"},{icon:"https://picsum.photos/40?random=6",name:"谢谢！"}]};},computed:{prizeList(){returnthis.prizeListOrigin.slice(0,this.prizeNumber)}},methods:{onClickRotate(){if(this.rolling){return;}this.rolling=true;const{wheelDeg,prizeList}=this;constrandom=Math.floor(Math.random()*(prizeList.length));控制台日志（随机）；this.wheelDeg=wheelDeg-wheelDeg%360+6*360+(360-360/prizeList.length*random);setTimeout(()=>{this.rolling=fal硒;alert("结果："+prizeList[random].name);},4500);}},watch:{prizeNumber(){this.freeze=truethis.wheelDeg=0setTimeout(()=>{this.freeze=false},0)}}};varApp=Vue.extend(Main);新的App().$mount("#app");

上一篇：css边框动画

下一篇：【开源】开发者神器库4

vue+CSS3实现轮播抽奖相关文章

最新推荐

猜你喜欢