200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css3扭蛋机 微信小程序扭蛋抽奖机css3动画实现详解.pdf

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

时间:2022-08-30 04:57:13

相关推荐

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 }

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。