div框动上下拉实例

以下是一个简单的 div 框动上下拉的示例：

HTML 代码：

<div class="box">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus eget enim lacinia tristique. Nullam sagittis, nisl ut sagittis tincidunt, nisi ligula pretium nulla, eget varius nibh lacus ut ligula. Praesent ac est ut mi bibendum mattis. Donec nec velit vel arcu mollis molestie.</p>
  </div>
</div>

CSS 代码：

.box {
  overflow: hidden;
  height: 100px;
}

.content {
  position: relative;
  top: 0;
  transition: top 0.5s ease;
}

.box:hover .content {
  top: -50px;
}

解释：

1. `.box` 设置了 `overflow: hidden;`，这样就可以隐藏 `.content` 超出 `.box` 的部分。
2. `.content` 设置了 `position: relative;`，这样它的 top 属性可以被修改。
3. `.content` 的 top 属性设置了过渡效果，这样当 top 值改变时就会有动画效果。
4. `.box:hover .content` 表示当鼠标悬停在 `.box` 上时，`.content` 的 top 值会改变，从而产生动画效果。

这个示例中，当鼠标悬停在 `.box` 上时，`.content` 会向上移动 50px，产生向上滑动的效果。你可以修改 `.box` 的高度和 `.content` 的 top 值来改变动画效果。