前言
最近快速上线一个抽奖活动,又不想用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)
}