我有一个背景图片,箭头指向右边.当用户点击按钮时,所选状态会将箭头更改为指向(使用我的图像精灵中的不同背景位置).
有没有使用CSS3动画化动画,所以一旦按钮被点击,jQuery分配一个“选择”类,它会旋转一个动画(只有90度)从右到下？ (优选使用指向右边的箭头的单个图像/位置)
我不确定是否需要使用变换或关键动画帧.
解决方法
您可以使用:: after(或:: before)伪元素来生成动画
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,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类而不是
jsfiddle演示：http://jsfiddle.net/p8kkf/
希望这可以帮助
