[分享]css两张图片合在一起过渡

CSS过渡动画非常有趣，而将两张图片合在一起过渡可以创建出视觉上的良好效果。下面我们将详细介绍如何通过CSS将两张图片合在一起过渡：/ HTML代码 / / CSS代码 / .containe...

CSS过渡动画非常有趣，而将两张图片合在一起过渡可以创建出视觉上的良好效果。下面我们将详细介绍如何通过CSS将两张图片合在一起过渡：

/* HTML代码 */
<div class="container">
  <img src="img1.jpg" alt="image1">
  <img src="img2.jpg" alt="image2">
</div>

/* CSS代码 */
.container {
  display: inline-block;
  position: relative;
  /* 两张图片的宽度和高度需要相同 */
  width: 300px;
  height: 300px;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  /* 将image2的透明度设置为0，即隐藏 */
  opacity: 0;
  /* 过渡效果的持续时间设置为1秒 */
  transition: opacity 1s;
}
/* 鼠标移到图片上时image2的透明度变为1，即显示 */
.container:hover img:last-child {
  opacity: 1;
} 

以上代码中，我们使用了容器div将两张图片包裹起来，并设置它们的宽度和高度相同。然后我们将两张图片的位置设为绝对定位，分别位于div容器的左上角。接下来，我们通过设置image2的opacity（透明度）为0，将它隐藏。我们使用CSS过渡动画的transition属性，并将两张图片的属性设置为opacity 1s，代表透明度的变化需要1s的持续时间。最后，我们设置container类选择器的:hover pseudo-class，当鼠标移到图片上时，它的最后一个子元素（即image2）的透明度变为1，被显示出来。