[分享]css3放在图片上图片变大

CSS3是我们在前端开发中常常使用到的技术，它提供了各种各样的效果，其中就包括放在图片上图片变大的效果。如今的网页设计中，这种效果已经成为了一种标配，所以学好它还是非常重要的。/ CSS3代码 / ....

CSS3是我们在前端开发中常常使用到的技术，它提供了各种各样的效果，其中就包括放在图片上图片变大的效果。如今的网页设计中，这种效果已经成为了一种标配，所以学好它还是非常重要的。

/* CSS3代码 */
.image:hover {
  transform: scale(1.2);
  transition: all .3s ease-in-out;
} 

其中，transform: scale(1.2);表示我们把图片的大小放大了20%。这里的“1.2”代表了图片的比例大小，如果想让图片更大，只需要调整这个数值即可。而transition: all .3s ease-in-out;则表示了放大的过程，这里的“.3s”代表时间的长短，也就是过渡的速度，而“ease-in-out”则代表过度的变化规律，这个可以根据需要进行调整。

还需要注意的是，这种效果只会在鼠标移动到图片上时发生，所以我们需要使用:hover来触发。

总的来说，这种效果非常简单易用，但是可以给网页增添不少的美感。如果你还没有学习CSS3，那么现在就是一个好时机，相信它会让你的网页设计更上一层楼。