记录一个使用background-image方式展示图片实现Hover平滑缩放效果的技巧

Posted 2021-09-14 数据里奥斯

开发时候除了直接用img标签放置图片外，也经常会用到在div中直接使用background-image的方式将图片作为背景图片放置，通常会是这个样子：

.cover{
    display: block;
    background-position: 50%;
    background-size: cover;
}

如果这时候需要做一个鼠标Hover上去时平滑放大一点，移开又平滑恢复原状的效果，就需要借助backgound-size来实现。

.cover:hover{
    background-size: 110%;
}

同时还需要在原有样式中加上transition的设置

.cover{
    ...
    transition: all .3s ease-in-out;
    background-size: cover;
}

但是这个时候发现虽然鼠标hover时背景图片已经有放大效果，但是平滑过度动画并没有起效果，依然是生硬的变化，所以可能的原因是transition并不知道要怎么执行对应的CSS参数平滑过度。看了下Hover的前后差别，是background-size: cover变成了background-size: 110%，这个。。。似乎它并不知道怎么进行线性变化呢，于是把原有CSS效果中的background-size改成100%试一下：

.cover{
    transition: all .3s ease-in-out;
    background-size: 100%;
}
.cover:hover{
    background-size: 110%;
}

试一下，Bingo！动画过度很自然，所以transition还是需要比较明确的数值变化差异，才能够执行动画效果的