如何用css transition制作图文混排过渡效果

实现图文混排平滑过渡的关键是使用CSS transition属性，配合hover触发transform和opacity等支持硬件加速的样式变化，如图片缩放、文字淡入、布局宽度调整及滤镜效果，通过合理设置过渡时间与缓动函数，确保动画流畅且布局稳定。

要实现图文混排的平滑过渡效果，关键在于使用 CSS 的 transition 属性控制元素在状态变化时的动画表现。常见场景比如鼠标悬停时图片缩放、文字浮现或布局微调。下面介绍几种实用方法。

1. 图片缩放 + 文字淡入（hover触发）

这是最常见的图文过渡效果：默认状态下图片正常显示，文字隐藏；鼠标移上时图片轻微放大，文字渐显。

HTML 结构：
<div class="card">
  <img src="image.jpg" alt="图片" class="card-img">
  <div class="card-text">这里是描述文字</div>
</div>

CSS 样式：
.card {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 12px;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.4s ease;
}

.card:hover .card-img {
  transform: scale(1.1);
}

.card:hover .card-text {
  transform: translateY(0);
  opacity: 1;
}

2. 左右图文布局的宽度过渡

适用于左侧图片、右侧文字的横向排列结构，鼠标悬停时图片宽度扩大，文字区域自动压缩并调整透明度。

CSS 示例：
.flex-card {
  display: flex;
  height: 150px;
  border: 1px solid #ddd;
}

.flex-img {
  width: 60%;
  height: 100%;
  background: url('image.jpg') no-repeat center;
  background-size: cover;
  transition: width 0.3s ease;
}

.flex-text {
  width: 40%;
  padding: 10px;
  color: #333;
  opacity: 0.8;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.flex-card:hover .flex-img {
  width: 70%;
}

.flex-card:hover .flex-text {
  width: 30%;
  opacity: 1;
}

3. 使用 transform 和 opacity 实现层叠过渡

当图文重叠放置时，可用 z-index 搭配 transform 控制出场顺序。例如文字初始在图片上方但透明，hover 时下移或上浮。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

264

查看详情

立即学习“前端免费学习笔记（深入）”；

.overlay-card {
  position: relative;
  width: 280px;
  height: 180px;
}

.overlay-img {
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(20px);
  opacity: 0;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  transition: all 0.4s ease;
}

.overlay-card:hover .overlay-img {
  filter: brightness(0.6);
}

.overlay-card:hover .overlay-text {
  transform: translateY(0);
  opacity: 1;
}

基本上就这些。核心是合理设置 transition 的属性、时间和缓动函数，配合 hover 改变样式触发过渡。注意保持布局稳定，避免重排抖动。可尝试组合 transform、opacity、filter 等支持硬件加速的属性，让动画更流畅。

以上就是如何用css transition制作图文混排过渡效果的详细内容，更多请关注php中文网其它相关文章！