3 回答

TA貢獻1818條經驗 獲得超11個贊
你的代碼里面只有位置移動的top,left。沒有寫旋轉的代碼。
在動畫幀時加入rotate(角度)就可以旋轉并移動,可以參考下面代碼。
相關示例如下:
< style > .ani{animation:box 1s linear 0s infinite;width:100px;height:100px;background:green;border-radius:50%;} @keyframes box{0% {transform:rotate(0deg)translate(0,0);}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0);}75%{transform:rotate(270deg);}100% {transform:rotate(360deg)translate(0,0);}} </ style > < div class = "ani" ></ div > |
CSS(層疊樣式表)級聯樣式表是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。

TA貢獻1936條經驗 獲得超7個贊
你在這里面也沒設置讓他旋轉的代碼,肯定不會旋轉的
就是這句:-webkit-transform:rotate(720deg) scale(2,2);
@keyframes mylasting1
{
0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
}
@-webkit-keyframes mylasting1
{
0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2);}
25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2);}
50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2);}
100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2);}
}

TA貢獻1804條經驗 獲得超8個贊
@keyframes mylasting1
{
0%{top:550px;}
25%{top:250px;left:100px;}
50%{top:150px;left:50px;}
100%{top:0px;left:0px;transform:rotate(720deg) scale(2,2);}
}
- 3 回答
- 0 關注
- 158 瀏覽
添加回答
舉報