問題描述
我有一個背景圖像，其中有一個指向右側的箭頭.當用戶單擊按鈕時，選定狀態會將箭頭更改為向下(在我的圖像精靈中使用不同的背景位置).
I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite).
是否有使用 CSS3 對其進行動畫處理的方法，所以一旦單擊按鈕并 jQuery 為其分配一個選定"類，它將在動畫中從右到下旋轉(僅 90 度)?(最好使用帶有指向右側的箭頭的單個圖像/位置)
Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right)
我不確定是否需要使用變換或關鍵動畫幀.
I'm unsure as to whether transform or key animation frames need to be used.
推薦答案
你可以使用 ::after (或 ::before) 偽元素，生成動畫
you could use the ::after (or ::before) pseudo-element, to generate the animation
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
}
/* element to animate */
div::after /* you will use for example "a::after" */
{
content:' ?'; /* instead of content you could use a bgimage here */
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
/* actual animation */
div:hover::after /* you will use for example "a.selected::after" */
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
HTML:
<div>Test button</div>
在您的情況下，您將使用 element.selected 類而不是
in your case you will use element.selected class instead of
jsfiddle 演示:http://jsfiddle.net/p8kkf/
希望對你有幫助
這篇關于使用 CSS3 旋轉背景圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！