h5 svg
- 作者: _老基哥
- 来源: 51数据库
- 2020-10-01
x轴和y轴的动画分开写，然后两个速度不一样就会形成曲线运动，具体曲线可以通过计算，随便写了个也可以直接给对应关键帧的x，y值
@keyframes bimg1 {
0% {top: 0;}
100% {top: 200px;}
}
@keyframes bimg2 {
0% {left: 0;}
100% {left: 200px;}
}
#item {
animation: bimg1 2s infinite cubic-bezier(0,0,1,1),bimg2 2s infinite cubic-bezier(0,1,0,1);
width: 10px;
height: 10px;
position: absolute;
background: red;
}
搜一下：怎么做一条运动的弧线 css js h5 svg 都可以
@keyframes bimg1 {
0% {top: 0;}
100% {top: 200px;}
}
@keyframes bimg2 {
0% {left: 0;}
100% {left: 200px;}
}
#item {
animation: bimg1 2s infinite cubic-bezier(0,0,1,1),bimg2 2s infinite cubic-bezier(0,1,0,1);
width: 10px;
height: 10px;
position: absolute;
background: red;
}
搜一下：怎么做一条运动的弧线 css js h5 svg 都可以
推荐阅读
