具有无限动画的CSS伪元素溢出主体

问题描述

我正在尝试使用随CSS动画向下移动的CSS伪元素文本创建漂亮的背景。除了文字一旦到达正文的底部，它会继续前进并使页面的整体高度变长之外，它的工作效果非常好。我希望我的文字继续显示下来，并在页面末尾隐藏起来。

.bgquote1 {
  position: relative;
}


.bgquote1::after {
  content:
  "I don't aim for perfection. But I do want to try and\A come up with something interesting. -Kate Bush";
  font-family: "Palatino";
  top: 10000px;
  left: 20px;
  transform: rotate(-90deg);
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge2 5900s linear infinite alternate;
  position: absolute;
}

https://jsfiddle.net/p6wmeftg/1/

请在示例中查看底部的文本，这些文本会不断下降，从而使页面变长，不再显示任何内容

解决方法

将此样式添加到您的.quotewrapper类中，并确保您的html和body具有position:relative并且没有固定高度：

html,body {
  position: relative;
  height: auto;
}
.quotewrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Your edited JSFiddle