[分享]css3放大效果后返回缓慢

CSS3是一种非常强大的样式语言，它可以帮助我们实现各种各样的效果，比如人们非常喜欢的放大效果。在CSS3中，我们可以使用scale属性来实现放大效果，非常的简单，是不是？但是，如果你希望放大效果之后...

CSS3是一种非常强大的样式语言，它可以帮助我们实现各种各样的效果，比如人们非常喜欢的放大效果。在CSS3中，我们可以使用scale属性来实现放大效果，非常的简单，是不是？但是，如果你希望放大效果之后又恢复到原本大小时有一个缓慢的过渡呢？今天，我们就来谈一谈怎么实现这个效果。

.box {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.1);
} 

代码很简单，首先我们给.box设置一个默认的scale(1)；然后我们添加transition属性，它的作用是让.box的变换发生一个缓慢的过渡，设置缓动函数为ease-in-out。最后，我们使用:hover伪类来实现当鼠标经过.box时的放大效果，设置scale为1.1。

这样，当鼠标移入.box时，.box会缓慢的从原本大小变大，当鼠标移出.box时，.box会同样缓慢的从放大的状态变回原本大小，这就是我们想要的缓慢效果，非常的简单，但却让我们的网页更加的美观。

现在，你已经知道了如何使用CSS3实现放大效果后返回缓慢了吗？快去试试它吧！