我有一个背景图片,箭头指向右边.当用户点击按钮时,所选状态会将箭头更改为指向(使用我的图像精灵中的不同背景位置).
有没有使用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/
希望这可以帮助
