2013-05-03 130 views
0

好吧,我有一個項目,我正在製作一個唱片播放器的卡通版本。我希望側面的播放按鈕可以使用webkit切換記錄的動畫,同時啓動音軌。音軌很好,但現在肯定會影響按鈕上的webkit。什麼是最好的方法來做到這一點?我寧願避免使用JQuery。按鈕控制動畫

任何在正確的方向點頭會很好。

+0

您好,本教程可能會幫助您http://tympanus.net/codrops/2012/07/12/old-school-cassette- player-with-html5-audio/ – 2013-05-03 20:59:52

+0

我不確定你對使用或影響WebKit意味着什麼?它只是Safari目前使用的渲染引擎,並且被Chrome取代,以支持稱爲Blink的分支。你的意思是你想用CSS來動畫記錄嗎? – 2013-05-03 21:39:36

+0

@dstorey是總之 – thestinkingbishop 2013-05-03 21:57:05

回答

0

你可以通過CSS轉換和CSS動畫實現你想要的。下面的演示展示瞭如何做旋:

http://jsfiddle.net/FSkKn/

div { 
    /* add -webkit, moz, and o prefixes to the property below */ 
    /* change 2s to the time you want for one revolution */ 
    animation: spin 2s linear infinite; 
} 


@keyframes spin { 
    /* both the keyframe above and the transform properties below need prefixes */ 

    from { 
     transform:rotate(0deg) ; 
    } 

    to { 
     transform:rotate(360deg); 
    } 
} 

現在你有一些紡紗,你只需要觸發它。最好的辦法是在單擊按鈕時向div(或您使用的元素)添加一個類。然後將動畫屬性添加到該類的選擇器中,如:

.spin-baby-spin { 

    animation: spin 2s linear infinite; 
} 
+0

謝謝,但我不能得到它的工作http://jsfiddle.net/FSkKn/1/我做錯了什麼? – thestinkingbishop 2013-05-03 22:11:15

+0

不少問題。有關解決方案,請參閱http://jsfiddle.net/FSkKn/2/。首先你沒有在spin-baby-spin規則中加入前綴。其次,您將課程添加到按鈕。它需要被添加到將旋轉的div。但只有在按鈕被點擊後。要做到這一點,你需要通過JS添加類,當你點擊按鈕。在演示中,我使用了classList.toggle,但這並沒有很好的瀏覽器支持,所以使用你最喜歡的方法添加和刪除類。 – 2013-05-03 22:24:19

+0

是否爲你工作? – 2013-05-04 05:28:51