[分享]css中心放大动画效果

CSS中心放大动画效果

.center {
    position: relative;
}
.center img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-in-out;
}
.center img:hover {
    transform: translate(-50%, -50%) scale(1.2);
} 

这段代码实现的效果是，当鼠标悬停在图片上时，图片会在中心点放大1.2倍，然后再缩小回原始大小。

首先，我们需要设置图片的父元素（例如：div）的position为relative，这样可以在其中创建绝对定位的图片。

然后，我们给图片设置绝对定位，并设置top和left值为50%，这样图片就可以在其父元素的中心点水平居中和垂直居中了。

接着，我们使用CSS3的transform属性将图片向左上方移动50%自身宽度和高度的距离，这样就能够使图片完全居中了。

最后，我们给图片设置过渡效果transition，并给其设置:hover伪类，当鼠标悬停在图片上时，将图片的transform属性改为放大1.2倍，这样就可以实现中心放大动画效果了。

记得一定要设置过渡效果，否则放大效果会很生硬，体验极差。