Question

要使用css制作类似滚动的动画，我希望将一个html div作为“窗口”，以看到另一个div，然后我可以对其进行动画处理以上下移动，将内容剪裁为它滑出视口。背景div应该只包含文本，但在不同的行中，最前面或“窗口” div不包含任何内容，但高度只能是一行文本。

大多数答案链接到将父元素指定为“ position：relative;”的选项。而里面的孩子是“绝对的”。但是，一旦我开始移动后者，它就会滑出视口。溢出：隐藏；由于某些原因不适用于window div。

<div class="sometext">
hello I am 
  <div class="window">
    funny
    <div class="view">
    funny<br>great<br>dull<br>silly
    </div>
  </div>
</div>

CSS：

.sometext{
  background-color:pink;
}

.window{
  display:inline;
  position:relative;
  color:transparent;
  overflow:hidden;
  background-color:green;
  z-index:1;
}

.view{
 position:absolute;
 top:0;
 right:0;
 color:black;
 overflow:hidden;
}

请参阅： https://jsfiddle.net/u23hv1dx/

注意：

视口应仅为绿色矩形，因此最初仅显示单词“ funny”，应该可以通过操作.view top参数进行更改
.window元素包含（透明）单词“ funny”，唯一的原因是其具有必要的chil宽度
顺便说一句，为什么这里的孩子略微位于祖先的右边？

Answer 1

希望我能正确理解您的问题。您无法将溢出隐藏设置为内联元素。使用inline-block，然后将内容垂直对齐到底部并设置行高：1.应该对其进行修复。

将div“窗口”设置为以下另一个div

1 个答案: