CSS3動畫，讓絕對定位的元素沿圓弧移動，@keyframes bimg1 {
0% {top: 10%;left: 12%;width:50%;}
30% {top: -10%;left: -12%;width:45%;}
100% {top: 19%;left: 52%;width:40%;}
}這樣寫的話，會是線性的移動，從一個點，移動到另外一個點，想要的效果是按圓弧來移動
2 回答
慕仙森
TA貢獻1827條經驗 獲得超8個贊
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;
}
- 2 回答
- 0 關注
- 2475 瀏覽
添加回答
舉報
0/150
提交
取消