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

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

前前言言

最近快速上线一个抽奖活动，又不想 canvas做，思考了很久，还是决定使 css3的动画来做，只要小球动得快，就没人发现我

这些个小球的运动路径都是一样的了。先上动图

wx ml文文件件：：

1

2

2

3

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

wxss文文件件：：

1 .weiyi_1 {

2 animation: around1 1.5s linear infinite;

3 -webkit-animation: around1 1.5s linear infinite;

4 }

简简单单的的动动画画

1 /* 位移 */

2

3 @-webkit-keyframes around1 {

4 0% {

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

6 }

7 20% {

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

9 }

10 40% {

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

12 }

13 60% {

14 -webkit-transform: translate(50rpx, -230rpx)

15 }

16 80% {

17 -webkit-transform: translate(300rpx, -50rpx)

18 }

19 100% {

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

21 }

22 }