回答
你必須在CSS3中進行輪換。
@keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
#rotating_div
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
這裏的JavaScript的:
function rotate(id) {
div = getElementById['id'];
div.style.animation-play-state = running;
}
這裏的HTML:
<div id="rotating_div" onclick="rotate("rotating_div")"></div>
使用前綴-moz-和-webkit-得到CSS3在FF和其他瀏覽器工作。看看這裏:W3Schools.com
祝你好運! :)
謝謝!我怎麼能做到這一點,而不是隻是運行指定的時間,它會繼續旋轉。所以像這樣:動畫定時功能:易線性;但顯然這是行不通的,哈哈。 –
animation-iteration-count說明它應該重複多少次。(你可以使用無限) –
@keyframes rotate { 0%{transform:rotate(0); } 25%{transform:rotate(50); } 50%{transform:rotate(120); } 75%{transform:rotate(250); } 100%{transform:rotate(360); } } 如果你這樣做,那麼它會一直褪色 –
可愛(在「阻止它並給我我的搜索結果」的意義上)儘管這是支持瀏覽器,但它根本沒有幫助實現該效果。 – Quentin
謝謝!但是,我將如何保持它持續運動? –
您需要使用window.setInterval
來控制動畫。更多信息here
我的第一個想法是結合JS定時器和CSS3轉換,但看着w3schools.com,我看到實際上在CSS3中有動畫支持。
我認爲這將被執行如下;
@keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
div #lp
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: running;
}
這是不是一個真正的JS解決方案,但是這是迄今爲止最簡單的解決方案,但如果你的目標瀏覽器不支持CSS3,那麼你可能想使用動畫GIF圖像。
你將不得不使其在其他化網頁瀏覽器工作太,但它只是添加-webkit-標籤和這樣的,關於這個問題的更多信息,請訪問:http://www.w3schools.com/css3/css3_animations.asp這裏:http://www.w3schools.com/css3/css3_2dtransforms.asp
(對不起給那些不喜歡w3schools.com的人)
Thankyouuu!非常豐富和非常詳細。謝謝你花時間把這些放在一起。我會做一個GIF,但圖像是動態創建的,所以...儘管如此,它仍然可以很好地工作! CSS3真的讓所有的事情變得簡單很多(而且還有很多funner!)你最好的! –
- 1. 可旋轉的圖像或div與javascript?
- 2. 是否arr = [val] * N具有班輪或恆定時間?
- 3. 是否有可能宣佈一個數組恆定
- 4. 繪製具有特定位置,大小和旋轉的圖像
- 5. 是否有可能使圖像居中?
- 6. 具有恆定的LLVM
- 7. 是否有可能產生具有FPDF
- 8. 是否有可能在Altivec中旋轉一個128位的值?
- 9. 沒有圖像處理工具箱旋轉圖像
- 10. AppleScript是否具有像AutoIt或AutoHotkey的圖像識別
- 11. 是否有可能具有無狀態定時功能
- 12. 是否有可能直接啓動功能具有定時
- 13. 弧進度條具有恆定的圖像內
- 14. PHP是否有可能直接將html轉換爲圖像
- 15. 具有恆定數字和
- 16. 具有恆定值型
- 17. 是否有可能使用具有泛型綁定類的EJB?
- 18. 是否有可能知道JPEG圖像是否僅從其原始字節進行旋轉?
- 19. 是否有可能在iOS中強制UI自動旋轉?
- 20. 使用具有特定程度的jQuery旋轉DIV?
- 21. DataSet是否具有Contain或In功能?
- 22. 是否有可能將圖像隱藏在圖像後面?
- 23. 是否有可能獲得帶有環形交通插件的旋轉木馬?
- 24. Web-kit css div shadow:是否有可能把它放在與純CSS的div或需要圖像?
- 25. 爲什麼旋轉的圖像具有相同的寬高比?
- 26. Android的 - 是否有可能像ViewFlipper
- 27. 如何確定是否圖像具有透明像素
- 28. Twitter Bootstrap具有覆蓋響應圖像的旋轉木馬
- 29. 是否有可能在另一幅圖像中爲圖像創建「定位點」?
- 30. Java旋轉圖像功能
是的,這是可能的。 – JJJ
你能告訴我一個教程嗎? Thankyou :) –