Question

我正在使用一个在悬停时向上移动的按钮。签出：https://jsfiddle.net/jmt3yk1v/。不幸的是，按钮文本处于“悬停”状态时变得模糊。我已经在不同的屏幕上对其进行了测试，并且显示的模式似乎是devicePixelRatio周围1 and slightly above的设备出现了最多的麻烦。在Retina显示屏上，根本没有问题。

因此，如果您使用的是非视网膜显示器，则您肯定会看到模糊的文本。解决此问题的方法是什么？我应该避免CSS转换还是可以减轻模糊度？

html：

<a  href="/" class="btn btn-default bg inline-block"> Linky Button </a>

css：

.bg{
      background: linear-gradient(45deg, #275a77 0%, #38c195 100%);
}

.btn {
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    letter-spacing: .5px;
    margin: 0;
    text-transform: uppercase;
    -webkit-appearance: none;
}
  .btn-default {
    border: 0;
    /* background: #2a7741; */
    padding: 11px 30px;
    font-size: 14px;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}  

.inline-block{
    display: inline-block;
}


.btn:hover {
    transform: translate3d(0,-3px,0);
    box-shadow: 0 5px 8px #22222233;
}

Answer 1

如果对动画使用负边距，则模糊似乎消失了

.btn:hover {
    margin-top: -3px:
    box-shadow: 0 5px 8px #22222233;
}

在悬停时翻译CSS时按钮文本模糊

1 个答案: