版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41033913/article/details/88757097
经常可以在网上看到一些有趣的加载动画,其实并不需要JS控制,只需要CSS去进行调节,需要用到的知识主要是CSS3的2D转换。
- 首先得生成四个小盒子,可以自己调喜欢的样式
类似于这个样子,为了后面好区分我就加了不同的颜色
- 其次再看需求是什么,我这里写的是第一个盒子左右滑动,如果遇到了盒子就跳动到滑动盒子的位置,然后不断循环
第一个盒子的animation样式
.scroll{
animation: leftRight 3s infinite linear;
}
@keyframes leftRight{
0%{
transform: translate(0,0);
}
50%{
transform: translate(600px,0);
}
100%{
transform: translate(0,0);
}
}
简要的意思就是,在动画50%的时候盒子需要移动到最右边,动画完成的时候回到开始位置
剩余盒子就得依靠第一个盒子过来的位置去控制跳动的时间,可以简单的计算一下接下来动画开始的时间
我以第一个盒子为例简单的说明一下:
可以去想想一下盒子跳动的过程,首先由类似于一种弹簧压缩的过程,我们可以用到transform里面的scale去压缩宽高,然后开始望左边跳动,这里需要写一下跳到半空中情况,要不然解析的时候这么知道你是要向上跳,我就写了在5%的时候跳到一半的过程,这个时候,需要写盒子的位置,用translate去控制位置,rotate去控制旋转的角度;最后面就是第一个阶段跳下来的过程,即到第二个盒子的位置,到此前20%的动画完成
然后第一个盒子转身回来的时候也要进行动画的跳动,过程和跳过来一致,只是动画百分比改变。
用百分比去控制动画可以由很多效果,这里其实可以做成果冻的效果,有兴趣的话可以调一下样式,反正我调三个盒子是跳不动了,太难受了!
.upDown-1{
animation: upDown1 infinite 3s ease;
}
@keyframes upDown1{
0% {
transform: translate(0px,0px) ;
bottom: 100px
}
2%{
transform: scale(.9,.6);
}
5%{
transform: translate(-100px,-150px) scale(1,1) rotate(150deg);
}
20% {
transform: translate(-200px,0px);
}
80%{
transform: translate(-200px,0px);
}
88%{
transform: translate(-100px,-150px) scale(.9,.6) rotate(90deg);
}
100%{
transform: translate(0px,0px);
}
}