微微信信小小程程序序 扭扭蛋蛋抽抽奖奖机机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 }