如何在HTML/CSS中实现文本瞬间淡入、缓慢淡出效果？

用纯HTML+CSS就能实现你要的效果，核心是利用CSS的transition属性分别控制悬停淡入和移出淡出的速度，不需要额外JavaScript。

实现代码 #

HTML结构

<div class="image-container">
  <img src="你的黑底黑字图片路径" alt="黑底黑字图片">
  <span class="color-text">你的彩色文本内容</span>
</div>

CSS样式

.image-container {
  position: relative;
  display: inline-block; /* 容器随图片宽度自适应 */
}

.image-container img {
  display: block; /* 消除图片底部默认间隙 */
  width: 100%; /* 图片自适应容器宽度 */
}

.color-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 初始完全透明 */
  color: #ff4081; /* 自定义彩色文本颜色 */
  font-size: 16px;
  font-weight: bold;
  /* 移出时的缓慢淡出过渡 */
  transition: opacity 0.5s ease;
}

.image-container:hover .color-text {
  opacity: 1; /* 悬停时完全显示 */
  /* 悬停时瞬间淡入，取消过渡动画 */
  transition: opacity 0s ease;
}

关键逻辑说明 #

• 用相对定位的容器包裹图片和文本，让文本可以绝对定位覆盖在图片上方
• 文本初始状态opacity: 0，并设置transition: opacity 0.5s ease，保证移出鼠标时缓慢淡出
• 鼠标悬停时，将文本opacity设为1，同时把过渡时间改为0s，实现瞬间淡入的效果
• 可根据需求调整文本颜色、字体大小，或修改0.5s来调整淡出速度

内容的提问来源于stack exchange，提问作者Ah Madness