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

方法一

通过添加translateZ(0)来解决

JAVASCRIPT
.excerpt img:hover{
    transform:translateZ(0) scale(1.15);
    -webkit-transform:translateZ(0) scale(1.15);
    z-index:9999999;
}
点击展开查看更多

方法二

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

JAVASCRIPT
.excerpt img:hover{
    transform:translate3d(2%, 2%, 0)scale(1.15);
    -webkit-transform:translate3d(2%, 2%, 0)scale(1.15);
    z-index:9999999;
}
点击展开查看更多

版权声明

作者: JunYan`Blog

链接: https://www.jinjun.top/posts/25/

许可证: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

评论

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键