CSS中心放大动画效果.center { position: relative; } .center img { position: absolute; top: 50%; left: 50%; tr
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倍,这样就可以实现中心放大动画效果了。
记得一定要设置过渡效果,否则放大效果会很生硬,体验极差。
粉丝
0
关注
0
收藏
0