css 图片 过渡动画效果

使用CSS实现图片过渡动画效果可以让网页更加生动活泼，增强用户体验。在本文中，我将介绍如何使用CSS实现两种不同的图片过渡效果。 第一种效果是当鼠标悬停在图片上时，图片逐渐变暗。代码如下：

img:hover {
  filter: brightness(70%);
  transition: all 0.3s ease;
}

这段代码中，filter: brightness(70%);表示将图片亮度降低到70%。transition: all 0.3s ease;表示触发过渡效果要花费0.3秒，过渡效果采用缓动函数ease。 第二种效果是当鼠标悬停在图片上时，图片从左到右滑动展示出文字。代码如下：

.container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slide {
  position: absolute;
  left: -500px;
  top: 0;
  width: 500px;
  height: 300px;
  background-color: #ccc;
  transition: all 0.3s ease;
}
.container:hover .slide {
  left: 0;
}
.content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 500px;
  height: 100px;
  background-color: rgba(0,0.5);
  color: #fff;
  text-align: center;
  transition: all 0.3s ease;
}
.container:hover .content {
  left: 0;
}

这段代码中，container类是包含图片和文字的容器，position: relative;表示相对定位；overflow: hidden;表示溢出部分不显示。slide类表示向左滑动的图片，position: absolute;表示绝对定位；left: -500px;表示初始位置在左侧；transition: all 0.3s ease;表示过渡效果采用缓动函数ease。当鼠标悬浮在container上时，.container:hover .slide { left: 0; }表示图片滑动到可见区域。content类表示显示文字的块，position: absolute;表示绝对定位；left: 0;表示初始位置在左侧；transform: translateY(-50%);表示垂直居中。transition: all 0.3s ease;表示过渡效果采用缓动函数ease。当鼠标悬浮在.container上时，.container:hover .content { left: 0; }表示文字块滑动到可见区域。 通过以上代码，我们可以实现两种不同的图片过渡动画效果。这些过渡效果可以为网页增加趣味性和互动性，并且通过合理运用可以提升用户体验。