最近在博客加了一个移动鼠标到图片放大的特效,使用了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;
}
之前我用插件实现过这个功能,但是插件安装多了就卡了,现在这些都不考虑了。
能不用插件就不用,在主题集成就好了。设置一个开关。