实现图文混排平滑过渡的关键是使用CSS transition属性，配合hover触发transform和opacity等支持硬件加速的样式变化，如图片缩放、文字淡入、布局宽度调整及滤镜效果，通过合理设置过渡时间与缓动函数，确保动画流畅且布局稳定。
要实现图文混排的平滑过渡效果，关键在于使用 CSS 的 transition 属性控制元素在状态变化时的动画表现。常见场景比如鼠标悬停时图片缩放、文字浮现或布局微调。下面介绍几种实用方法。
1. 图片缩放 + 文字淡入（hover触发）
这是最常见的图文过渡效果：默认状态下图片正常显示，文字隐藏；鼠标移上时图片轻微放大，文字渐显。
示例代码：
HTML 结构：
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 时下移或上浮。
立即学习“前端免费学习笔记（深入）”；
.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 等支持硬件加速的属性，让动画更流畅。
