看代码是hover改变width 和 height,浏览器针对width,height之类的渲染帧数很低。不知道为什么不用transform...

使用 transform: scale3d(1.08, 1.08, 1.08);  或者 transform: matrix3d(1.08, 0, 0, 0, 0,  1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1); 会强制调用硬件渲染,帧数更高更流畅。

还有因为a标签的边框问题给img加的 margin-left: -1px; margin-top: -1px; 其实不是很严谨,加上之前hover改变宽高也会造成动画效果的卡顿。

如果图片比例固定可以尝试一下这种方式:

以我这里看到的宽高比是0.75为例,假设一排放5个a标签,间距为2%;

.pb{

     width: 18.5%;

    margin-right: 2%;   

    margin-bottom: 20px; 

}

.pb:nth-of-type(5n + 5){

    margin-right: 0;

}

a{

    position: relative;

    padding-bottom: 75%;

}

a img{

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    object-fit: cover;

}

没有什么其他意思,主要是自己每天都会看之家摸鱼,只是像让之家的体验越来越好!所以有一些方法分享,不一定对仅供参考。

操作系统:iOS 13.6 (iPhone X/App7.33)