transform: scale() 图片文字模糊的原因

今天做一个刮刮乐H5应用的时候，用到了个简单的 CSS 动画效果，就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口，以及按钮重复变大变小的动画，结果遇到个很郁闷的问题，按钮和文字变得非常模糊，完全没法看，很是奇怪，搞了半天才找到原因：因为使用了两层缩放，导致第二次缩放继承或者说使用的按钮渲染尺寸已经不是原来正常的尺寸，而是之前被缩放后的尺寸导致当前缩放模糊，有点晕哈。

具体动画效果可以看看这篇文章：简单的Canvas刮奖带动画效果的实例

本来应该是这样的效果（立即领取按钮）

这里写图片描述

实际效果非常模糊

这里写图片描述

简直惨不忍睹。。。没法看了，实在莫名其妙

看看代码：

.gift-show-ct .show-inner.small { transform: scale(.1); transition: all .3s ease-in; -webkit-transition: all .3s ease-in; }
.gift-show-ct .show-inner.normal { transform: scale(1); }

这是面板的一个过渡动画，从 0.1 等比例放大到 1 正常尺寸（不缩放），获奖面板显示是没有问题的，
问题在于按钮上也加上了一个重复缩放动画

@keyframes btwc {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.95);
    }
    100% {
        transform: scale(1);
    }
}

.gift-show-ct .show-inner .go-to-bt {
    -webkit-animation: btwc infinite 1s ease-in-out;
    -o-animation: btwc infinite 1s ease-in-out;
    animation: btwc infinite 1s ease-in-out;
    display: block; height: 40px; line-height: 35px; margin: auto; font-size: 18px; text-decoration: none; color: #FFF; text-align: center; background: url(../img/go-to-bt.png) no-repeat center center; background-size: auto 100%;
}

由于 .show-inner 初始化时被我添加了 class small 导致一开始就被缩小了10倍，此时按钮图片和文字已经非常小了，这时按钮的缩放动画却始终是以1/10的尺寸为基础进行的，所以最终按钮变得惨不忍睹，这其实犯得是个很低级的错误啊，不过还好我不是专业前端，我只是来打酱油的。

现在稍微改下，加个 class .normal 的修饰限制

.gift-show-ct .show-inner.normal .go-to-bt {
    -webkit-animation: btwc infinite 1s ease-in-out;
    -o-animation: btwc infinite 1s ease-in-out;
    animation: btwc infinite 1s ease-in-out;
    display: block; height: 40px; line-height: 35px; margin: auto; font-size: 18px; text-decoration: none; color: #FFF; text-align: center; background: url(../img/go-to-bt.png) no-repeat center center; background-size: auto 100%;
}

这样写样式按钮就恢复正常了，仅当面板缩放恢复正常时，才会触发按钮的缩放动画，这是所有的比例都是正常的了。

我这个例子是很特殊很奇葩的错误，只是我在网上查询问题的时候，遇到了一些有其他图片文字模糊但又找不到原因的问题，我觉得有可能是类似这种原理的BUG吧，希望能对你有所帮助啊。。。就这样

transform: scale() 图片文字模糊的原因

猜你喜欢