本文介绍了动画与jQuery精灵的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有谁知道动画使用jQuery一个精灵的最佳方法。有图像的3个阶段,我需要逐渐变身鼠标悬停并最终降落在最后一节,直到鼠标关闭。
Does anybody know the best approach to animating a sprite using jquery. There are 3 stages of an image that i need to gradually to morph on mouseover and eventually landing on the final one until mouse off.
下面是图像:
谢谢!
推荐答案
我使用尝试了CSS3的转换和动画(只适用于现代的浏览器,请参阅)
I tried something using CSS3 transition and animation (it only works on modern browser, see caniuse)
您可以在这里看到我的例子小提琴:)
HTML is simply <div><span></span></div>
: I tried to avoid the inner span in favour of pseudoelements: on Chrome, unfortunately, transitions don't properly work when applied to such elements (see bug http://code.google.com/p/chromium/issues/detail?id=54699)
在CSS
div {
height: 100px;
width : 100px;
-webkit-border-radius: 100px;
-msie-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border : 20px red solid;
cursor : pointer;
}
div span {
-webkit-transform: rotate(45deg);
-msie-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
display : block;
margin : 10px 0 0 -20px;
background : #fff;
width : 102px;
height : 40px;
-webkit-transition: all 2s ease;
-msie-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
div:hover {
-webkit-animation : rotation 2s ease;
-msie-animation : rotation 2s ease;
-moz-animation : rotation 2s ease;
-o-animation : rotation 2s ease;
animation : rotation 2s ease;
}
div:hover span {
height : 0;
margin-top : 30px;
}
@-moz-keyframes rotation {
0% { -moz-transform: rotate(45deg); }
100% { -moz-transform: rotate(-135deg); }
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(45deg); }
100% { -webkit-transform: rotate(-135deg); }
}
@-msie-keyframes rotation {
0% { -msie-transform: rotate(45deg); }
100% { -msie-transform: rotate(-135deg); }
}
@-o-keyframes rotation {
0% { -o-transform: rotate(45deg); }
100% { -o-transform: rotate(-135deg); }
}
@keyframes rotation {
0% { transform: rotate(45deg); }
100% { transform: rotate(-135deg); }
}
这篇关于动画与jQuery精灵的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!