公司新闻|NEWS

当前位置: 主页 » 新闻动态 » 公司新闻

微信小程序扭蛋抽奖机css3动画实现详解

发布:小编 浏览:

  最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了。先上动图

微信小程序扭蛋抽奖机css3动画实现详解(图1)

  这个做得我头皮发麻,但是写这篇文章时突然想到,为啥不用个for循环来做呢?!

  这样看起来是不是舒服多了,因为是这段代码现场手写,如果有啥bug也不好说。

  这里用了一个setTimeout,用于设置动画买球结束时间,优化一下动画,不让结束看起来太突兀。

  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。