[英]Button text blurring when hovering over an icon
I've made the icon of the paper plan shake when hovered over. 当我盘旋时,我已经将纸张图标的图标震动了。 However, the text on the buttons underneath blurs a bit too.
但是,下面按钮上的文字也有点模糊。 I tried removing the animation and the text still blurs when you hover over the icon (despite the icon not doing anything).
我试图删除动画,当你将鼠标悬停在图标上时文本仍然模糊(尽管图标没有做任何事情)。
CSS for the animation: 动画的CSS:
.fa-shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
jQuery: jQuery的:
$('.plane').hover(function() {
$(this).addClass('fa-shake');
}, function () {
$(this).removeClass('fa-shake');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.