|
|
|
|
|
$time:2;
|
|
|
|
|
|
.move0{animation: move0 $time*5s linear infinite;}
|
|
|
|
|
|
.move1{animation: move1 $time*6s ease-in infinite;}
|
|
|
|
|
|
.move2{animation: move2 $time*7s ease-out infinite;}
|
|
|
|
|
|
.move3{animation: move3 $time*8s ease-in-out infinite;}
|
|
|
|
|
|
.move4{animation: move4 $time*9s ease-in infinite;}
|
|
|
|
|
|
.move5{animation: move5 $time*10s ease-in infinite;}
|
|
|
|
|
|
.move6{animation: move6 $time*11s linear infinite;}
|
|
|
|
|
|
.move7{animation: move7 $time*12s ease-in-out infinite;}
|
|
|
|
|
|
.move8{animation: move8 $time*13s ease-out infinite;}
|
|
|
|
|
|
|
|
|
|
|
|
//设定好的小圆运行方式
|
|
|
|
|
|
//小程序无法动态添加keyframes
|
|
|
|
|
|
//若是web，可通过document动态插入keyframes
|
|
|
|
|
|
//动态插入的效果更好，更强，更嗨皮
|
|
|
|
|
|
//向有小程序实现方式的大伙伴请教
|
|
|
|
|
|
@keyframes move0{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(400,10rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move1{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(0,500rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move2{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(400rpx,800rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move3{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(200rpx,200rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move4{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(100rpx,700rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move5{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(400rpx,100rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move6{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(200rpx,10rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move7{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(200rpx,500rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes move8{
|
|
|
|
|
|
0%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
50%{transform:translate3d(0,500rpx,0)}
|
|
|
|
|
|
100%{transform:translate3d(0,0,0)}
|
|
|
|
|
|
}
|
