Question

我已经在我们网站的菜单栏中设置了徽标，因此当用户将鼠标悬停时，徽标会略微放大。但是，徽标在缩放时会同时模糊。有什么建议吗？

#logo a {
  display: inline-block;
  max-width: 55%;
  transform: scale(.95);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

#logo a:hover {
  transform: scale(1);
}

<div id="logo">
  <a href="https://www.umu.ajt.mybluehost.me/opencart/index.php?route=common/home"><img src="https://www.umu.ajt.mybluehost.me/opencart/image/catalog/logo/logo.png" title="BumperPlugs.com" alt="BumperPlugs.com" class="img-responsive"></a>
</div>

Answer 1

尝试一下。它应该可以解决这个问题。

#logo a {
  display: inline-block;
  max-width: 55%;
  transform: scale(.95);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

#logo a img{
  -webkit-backface-visibility: hidden; 
  -ms-transform: translateZ(0); /* IE 9 */
  -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
   transform: translateZ(0);
}


#logo a:hover {
  transform: scale(1);
}

<div id="logo">
  <a href="https://www.umu.ajt.mybluehost.me/opencart/index.php?route=common/home"><img src="https://www.umu.ajt.mybluehost.me/opencart/image/catalog/logo/logo.png" title="BumperPlugs.com" alt="BumperPlugs.com" class="img-responsive"></a>
</div>

CSS转换：在悬停时缩放模糊图像

1 个答案: