css3扭蛋机,微信小程序 扭蛋抽奖机CSS3动画实现详解_咋地 _前端开发者

前言

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

wxml文件：

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

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

wxss文件：

.weiyi_1 {

animation: around1 1.5s linear infinite;

-webkit-animation: around1 1.5s linear infinite;

}

简单的动画

/* 位移 */

@-webkit-keyframes around1 {

0% {

-webkit-transform: translate(0rpx, 0rpx)

}

20% {

-webkit-transform: translate(100rpx, -250rpx)

}

40% {

-webkit-transform: translate(200rpx, -100rpx)

}