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

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);
    }
}

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

完整代码如下：

↓ 会员用户可见内容 ↓

您暂无权限阅读此内容😴,请先破解或登录并低成本开通本站会员（很实惠）