好吧,我有一個項目,我正在製作一個唱片播放器的卡通版本。我希望側面的播放按鈕可以使用webkit切換記錄的動畫,同時啓動音軌。音軌很好,但現在肯定會影響按鈕上的webkit。什麼是最好的方法來做到這一點?我寧願避免使用JQuery。按鈕控制動畫
任何在正確的方向點頭會很好。
好吧,我有一個項目,我正在製作一個唱片播放器的卡通版本。我希望側面的播放按鈕可以使用webkit切換記錄的動畫,同時啓動音軌。音軌很好,但現在肯定會影響按鈕上的webkit。什麼是最好的方法來做到這一點?我寧願避免使用JQuery。按鈕控制動畫
任何在正確的方向點頭會很好。
你可以通過CSS轉換和CSS動畫實現你想要的。下面的演示展示瞭如何做旋:
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;
}
謝謝,但我不能得到它的工作http://jsfiddle.net/FSkKn/1/我做錯了什麼? – thestinkingbishop 2013-05-03 22:11:15
不少問題。有關解決方案,請參閱http://jsfiddle.net/FSkKn/2/。首先你沒有在spin-baby-spin規則中加入前綴。其次,您將課程添加到按鈕。它需要被添加到將旋轉的div。但只有在按鈕被點擊後。要做到這一點,你需要通過JS添加類,當你點擊按鈕。在演示中,我使用了classList.toggle,但這並沒有很好的瀏覽器支持,所以使用你最喜歡的方法添加和刪除類。 – 2013-05-03 22:24:19
是否爲你工作? – 2013-05-04 05:28:51
您好,本教程可能會幫助您http://tympanus.net/codrops/2012/07/12/old-school-cassette- player-with-html5-audio/ – 2013-05-03 20:59:52
我不確定你對使用或影響WebKit意味着什麼?它只是Safari目前使用的渲染引擎,並且被Chrome取代,以支持稱爲Blink的分支。你的意思是你想用CSS來動畫記錄嗎? – 2013-05-03 21:39:36
@dstorey是總之 – thestinkingbishop 2013-05-03 21:57:05