钧言极客站钧言极客

钧言极客

解决transform scale 放大图片变模糊问题

最近在博客加了一个移动鼠标到图片放大的特效,使用了transform scale特效。但是发现放大后图片变得模糊,放大前半秒还是可以看见的,完全放大后像加了一层灰蒙模板一样。

方法一

通过添加translateZ(0)来解决

.excerpt img:hover{
    transform:translateZ(0) scale(1.15);
    -webkit-transform:translateZ(0) scale(1.15);
    z-index:9999999;
}

方法二

实现先放大再缩小这样就可使清晰度升高

.excerpt img:hover{
    transform:translate3d(2%, 2%, 0)scale(1.15);
    -webkit-transform:translate3d(2%, 2%, 0)scale(1.15);
    z-index:9999999;
}
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《解决transform scale 放大图片变模糊问题》
文章链接:https://www.jinjun.top/339.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 2

  1. 之前我用插件实现过这个功能,但是插件安装多了就卡了,现在这些都不考虑了。

    老张博客 2020年12月05日    回复
    • 能不用插件就不用,在主题集成就好了。设置一个开关。

      ღ钧言ღ 2020年12月05日    回复