鼠标悬停时对目标元素进行缩放

CSSCSS动画

2023-10-03 21:21:41

先看看这个效果：

当鼠标移入画面上方时，这个图片会缓缓放大。通常实现这个很简单，只需要在:hover的时候，使用transform属性将图片进行放大。

css 复制代码

img:hover{
  transform: scale(1.5);
}

这段代码虽然实现了这个效果，但是还不够。放大的效果会比较生硬，这个时候还需要一些动画的加持。

css 复制代码

@keyframes identifier {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
    }
}

加上这段代码，这个放大效果就比较丝滑了。

完整代码如下：

↓ 会员用户可见内容 ↓

css 复制代码

.img-container {
    height: 150px;
    width: 150px;
    overflow: hidden;
}

.img-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 1500m ease-in;
}

@keyframes identifier {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
    }
}

img:hover {
    animation: identifier 1.5s;
    /* 这里很关键，需要在动画结束的时候定格在1.5倍上 */
    transform: scale(1.5);
}