怎么做一条运动的弧线 css js h5 svg 都可以
答案:1 悬赏:20 手机版
解决时间 2021-11-27 11:12
- 提问者网友：未信
- 2021-11-27 00:42
怎么做一条运动的弧线 css js h5 svg 都可以
最佳答案
- 五星知识达人网友：杯酒困英雄
- 2021-11-27 01:30
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;
}
@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;
}
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯