我有一个箭头指向右侧的背景图像。当用户点击按钮时,所选状态会将箭头更改为指向下方(使用我的图像精灵中的不同背景位置)。用CSS3旋转背景图像
无论如何要使用CSS3动画,所以一旦按钮被点击和jQuery分配它一个“选定”的类,它会从右到下动画旋转(只有90度)? (最好使用带有指向右侧的箭头的单个图像/位置)
我不确定是否需要使用变换或关键动画帧。
我有一个箭头指向右侧的背景图像。当用户点击按钮时,所选状态会将箭头更改为指向下方(使用我的图像精灵中的不同背景位置)。用CSS3旋转背景图像
无论如何要使用CSS3动画,所以一旦按钮被点击和jQuery分配它一个“选定”的类,它会从右到下动画旋转(只有90度)? (最好使用带有指向右侧的箭头的单个图像/位置)
我不确定是否需要使用变换或关键动画帧。
您可以使用::after
(或::before
)pseudo-element
,产生动画
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>
在你的情况下你将使用替代
的jsfiddle演示 element.selected类:http://jsfiddle.net/p8kkf/
希望这有助于
有没有区别:之后和::之后? – xorinzor 2013-09-06 13:22:03
::后更正确,但:后更好的支持,都指同一件事 – 2013-09-06 21:56:34
超级伟大;)谢谢你! – 2013-12-18 12:16:15
这里是我已经习惯了旋转背景图像的旋转CSS类:
.rotating {
-webkit-animation: rotating-function 1.25s linear infinite;
-moz-animation: rotating-function 1.25s linear infinite;
-ms-animation: rotating-function 1.25s linear infinite;
-o-animation: rotating-function 1.25s linear infinite;
animation: rotating-function 1.25s linear infinite;
}
@-webkit-keyframes rotating-function {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotating-function {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotating-function {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes rotating-function {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotating-function {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
参见:如何旋转在容器中的背景图片?](HTTP://计算器。 com/q/5087420/1591669) – unor 2015-02-14 00:51:15