its*_*sme 5 javascript css jquery css3 jquery-effects
嗨有没有人可以告诉我使用jquery使用一些延迟/动画速度重现这个css3效果?
.element:hover{
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:9999;
}
Run Code Online (Sandbox Code Playgroud)
这与您所要求的非常接近。我相信你可以根据自己的喜好进行调整
$('.element').hover(function(){
$(this).css('position','relative').animate({
height: $(this).height()*1.3,
width: $(this).width()*1.3,
left: '-=' + $(this).width() /4,
top: '-=' + $(this).height() /4,
'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px'
},'fast');
},
function() {
$(this).css('position','relative').animate({
height: $(this).height()/1.3,
width: $(this).width()/1.3,
left: 0,
top: 0,
'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) / 1.3 + 'px'
},'fast');
}
);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
774 次 |
| 最近记录: |