我想动画一个角色的手,使它像是在向某人挥手,使用jQuery。 我试图交换2张图片(一只手向左倾斜,一只手指向右边)。但它不是很顺利...... 有更好的解决方案吗?我也尝试使用jQuery插件来旋转图像,但我找不到一个有效的插件(兼容IE8)。 谢谢你的帮助!
答案 0 :(得分:2)
当然,创建一个图像精灵
[手1/7] [手2/7] [手3/7] [手4/7] [手5/7] [手6/7] [手7/7]
在一个图像中,将手的边界设置为元素,然后使用jquery循环元素的背景位置。
这个答案应该让你开始:
Background image animation using css3 or jquery?
var c = 0 ;
function loop(){
c = ++c % 7; // Reminder the number of images (7)
$('#hand').css({backgroundPosition: (240*c)+'px 0px'}); // 240 = one image/sprite width
}
setInterval(loop, 25);
答案 1 :(得分:0)
答案 2 :(得分:0)
CSS3 animations / transforms可以创建动画
.waving-anim {
animation:wave 500ms infinite;
transform-origin:bottom left;
}
@keyframes wave {
0% {
transform:rotate(3deg);
}
50% {
transform:rotate(-3deg);
}
100% {
transform:rotate(3deg);
}
}
确实需要供应商前缀(参见演示),并且在当前浏览器中支持(包括IE10)