使用 CSS 将 div 和图片定位在同一个容器内，然后让 div 在这个容器内进行绝对定位，最后对 div 应用动画。

网页div在图片上添加动画
（图片来源网络，侵删）

下面我将分步讲解,并提供从简单到复杂的多种示例。

第一步：基础结构

我们需要一个 HTML 结构，最佳实践是使用一个容器 div 来包裹图片和动画 div，这样可以确保动画元素相对于图片进行定位，而不是整个页面。

<!-- 1. 容器：用于包裹图片和动画元素 -->
<div class="image-container">
  <!-- 2. 图片 -->
  <img src="your-image.jpg" alt="描述性文字">
  <!-- 3. 动画 div：这就是我们想要添加动画的元素 -->
  <div class="animated-div">
    <h2>这是一个标题</h2>
    <p>这里是一些描述性的文字。</p>
  </div>
</div>

第二步：核心 CSS 样式

这是最关键的一步,我们需要设置容器、图片和动画 div 的样式。

/* 1. 设置容器为相对定位，这是关键！ */
.image-container {
  position: relative; /* 建立定位上下文 */
  width: 100%;       /* 设置宽度 */
  max-width: 800px;  /* 最大宽度 */
  margin: 0 auto;    /* 居中显示 */
}
/* 2. 让图片充满容器 */
.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 移除图片下方的空隙 */
}
/* 3. 设置动画 div 的基本样式 */
.animated-div {
  /* 绝对定位，使其相对于 .image-container 定位 */
  position: absolute; 
  /* 将 div 放在图片的底部 */
  bottom: 0;
  left: 0;
  /* 设置背景色和透明度，以便能看到图片 */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
  color: white;
  /* 添加一些内边距和宽度 */
  padding: 20px;
  width: 100%;
  box-sizing: border-box; /* 确保 padding 不会增加宽度 */
}

关键点解释：

网页div在图片上添加动画
（图片来源网络，侵删）
  • position: relative 在 .image-container 上设置了“定位上下文”，这意味着接下来任何 position: absolute 的子元素，其位置都将相对于这个容器，而不是整个浏览器窗口。
  • position: absolute 在 .animated-div 上使其脱离了正常的文档流，并允许我们使用 top, bottom, left, right 来精确定位它。

第三步：添加动画

div 已经在图片上了，我们可以给它添加各种动画效果，CSS 动画主要通过 @keyframes 规则和 animation 属性实现。

这里提供几种流行的动画效果：

示例 1：淡入

动画元素从透明变为不透明。

/* 定义动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 初始状态：完全透明 */
  }
  to {
    opacity: 1; /* 结束状态：完全不透明 */
  }
}
/* 将动画应用到 div 上 */
.animated-div {
  /* ... 其他样式 ... */
  /* 应用动画 */
  animation: fadeIn 2s ease-in-out;
}

示例 2：从底部滑入

动画元素从容器底部滑入到当前位置。

网页div在图片上添加动画
（图片来源网络，侵删）
@keyframes slideUp {
  from {
    transform: translateY(100%); /* 从自身高度的100%开始，即从下方 */
  }
  to {
    transform: translateY(0); /* 移动到正常位置 */
  }
}
.animated-div {
  /* ... 其他样式 ... */
  animation: slideUp 1s ease-out;
}

示例 3：悬停时出现（交互式动画）

这是一个非常实用的效果：鼠标移到图片上时，文字才出现。

HTML 结构不变

CSS 修改：

/* 默认状态下，动画 div 是隐藏的 */
.animated-div {
  /* ... 其他样式 ... */
  opacity: 0; /* 初始完全透明 */
  visibility: hidden; /* 隐藏元素，但会占据空间 */
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
/* 当鼠标悬停在容器上时 */
.image-container:hover .animated-div {
  opacity: 1; /* 变为不透明 */
  visibility: visible; /* 显示元素 */
}

注意： 这里我们使用了 transition 而不是 @keyframes，因为它更适合处理由用户交互（如 hover）触发的平滑状态变化。

示例 4：打字机效果

让文字逐个字符出现,非常酷炫。

/* 定义打字机动画 */
@keyframes typewriter {
  from {
    width: 0; /* 初始宽度为0 */
  }
  to {
    width: 100%; /* 最终宽度为100% */
  }
}
/* 定义闪烁光标动画 */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
.animated-div h2 {
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 不换行 */
  border-right: 3px solid white; /* 模拟光标 */
  animation: 
    typewriter 4s steps(40, end), /* steps(40) 模拟打字，end 表示在关键帧结束时完成 */
    blink 0.75s step-end infinite; /* 光标闪烁 */
}

注意： 打字机效果通常只适用于单行文本。

完整代码示例（综合版）

下面是一个综合了悬停滑入效果的完整、可运行的 HTML 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">图片上的动画 Div</title>
  <style>
    body {
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .image-container {
      position: relative;
      width: 90%;
      max-width: 600px;
      border-radius: 10px;
      overflow: hidden; /* 确保滑入的 div 不会超出圆角 */
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      cursor: pointer; /* 鼠标放上去变成手型，提示可交互 */
    }
    .image-container img {
      width: 100%;
      height: auto;
      display: block;
    }
    .animated-div {
      position: absolute;
      bottom: 0;
      left: 0;
      /* 样式 */
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* 渐变背景 */
      color: white;
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
      /* 初始状态：隐藏在下方 */
      transform: translateY(100%);
      opacity: 0;
      /* 过渡效果：当 transform 或 opacity 改变时，平滑过渡 */
      transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }
    /* 当鼠标悬停在容器上时，改变 .animated-div 的状态 */
    .image-container:hover .animated-div {
      transform: translateY(0); /* 滑回原位 */
      opacity: 1; /* 显示出来 */
    }
    /* 可选：让标题也有一点动画 */
    .animated-div h2 {
      margin: 0 0 10px 0;
    }
    .animated-div p {
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="美丽的风景">
    <div class="animated-div">
      <h2>探索未知世界</h2>
      <p>每一次旅行都是一次心灵的洗礼，让我们踏上旅程，发现世界的美好。</p>
    </div>
  </div>
</body>
</html>

总结与建议

  1. 定位是关键：始终使用一个 position: relative 的容器包裹图片和动画元素，然后对动画元素使用 position: absolute。
  2. 选择合适的动画技术：
    • @keyframes：用于创建复杂的、自动播放的动画序列（如淡入、滑入、打字机）。
    • transition：用于简单的、状态驱动的动画（如悬停效果、点击效果）。
  3. 性能考虑：尽量使用 transform (如 translateX, scale) 和 opacity 来做动画，因为它们可以利用 GPU 加速，性能更好，避免频繁改变 width, height, top, left 等属性。
  4. 响应式设计：确保你的动画在不同屏幕尺寸下都能正常工作，使用百分比或 vw/vh 单位来定位元素，可以更好地适应不同设备。