亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

小白求助,為什么不用hover,我的就只能移動不能旋轉?

小白求助,為什么不用hover,我的就只能移動不能旋轉?

qq_花開花謝_0 2022-07-07 16:07:05
*{padding:0;margin:0;}#container1{width:800px;height:700px;}#showing1{width:200px;height:150px;float:right;position:relative;top:550px;background:#F36;border-radius:10px;transition:all 5s ease-in-out;transform:rotate(720deg) scale(2,2);animation:mylasting1;animation-delay:2s;animation-duration:5s;animation-play-state:running;animation-fill-mode:forwards;/* Safari and Chrome: */-webkit-border-radius:10px;-webkit-transition:all 5s ease-in-out-webkit-transform:rotate(720deg) scale(2,2);-webkit-animation:mylasting1;-webkit-animation-delay:2s;-webkit-animation-duration:5s;-webkit-animation-play-state:running;-webkit-animation-fill-mode:forwards;}@keyframes mylasting1{0%{top:550px;}25%{top:250px;left:100px;}50%{top:150px;left:50px;}100%{top:0px;left:0px;}}@-webkit-keyframes mylasting1{0%{top:550px;}25%{top:250px;left:100px;}50%{top:150px;left:50px;}100%{top:0px;left:0px;}}<div id="container1"><div id="showing1"></div></div>
查看完整描述

3 回答

?
慕尼黑8549860

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(標準通用標記語言的一個子集)等文件樣式的計算機語言。


查看完整回答
反對 回復 2022-07-11
?
LEATH

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);}
}


查看完整回答
反對 回復 2022-07-11
?
胡說叔叔

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);}

}

查看完整回答
反對 回復 2022-07-11
  • 3 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號