如何隐藏离开div的文本，并在到达文本末尾后返回到开头

Question

我需要隐藏从div中取出的文本，我尝试过overflow: hidden;，但它不起作用。。。我还需要当文本到达结尾时，即看到<a href="'#">link8</a> some text 3!....<br><br>时，它会回到开头<a href="'#">link1</a> some text...<br><br>。我不知道如何尝试这种形式，我对CSS不太了解。。。

#container {
position: fixed;
font-size: 20px;
transition: .2s;
margin-top: 10px;
transition: margin 1s;
}
#box:hover #container{
overflow: hidden;
margin-top: -3500px;
transition: margin 400s linear;
}

<div style="background-color: rgb(162, 0, 255); height: 400px;" id="box">
<div id="container">
<a href="'#">link1</a> some text...<br><br>
<a href="'#">link2</a> some more text 2....<br><br>
<a href="'#">link3</a> some text 3....<br><br>
<a href="'#">link4</a> some text 3....<br><br>
<a href="'#">link5</a> some text 3....<br><br>
<a href="'#">link6</a> some text 3....<br><br>
<a href="'#">link7</a> some text 3....<br><br>
<a href="'#">link8</a> some text 3!....<br><br>
</div>

Answer 1

我认为您最好使用动画而不是过渡。这是我的解决方案：

CSS：

#box {
background-color: rgb(162, 0, 255);
height: 300px;
position: relative;
overflow: hidden;
}
#container {
position: absolute;
font-size: 20px;
top: 10px;
}
#box:hover #container {
overflow: hidden;
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes example {
from {
top: 10px;
}

to {
top: -65px;
}
}

HTML:

<div id="box">
<div id="container">
<a href="'#">link1</a> some text...<br><br>
<a href="'#">link2</a> some more text 2....<br><br>
<a href="'#">link3</a> some text 3....<br><br>
<a href="'#">link4</a> some text 3....<br><br>
<a href="'#">link5</a> some text 3....<br><br>
<a href="'#">link6</a> some text 3....<br><br>
<a href="'#">link7</a> some text 3....<br><br>
<a href="'#">link8</a> some text 3!....<br><br>
</div>
</div>

在CSS中，您可以更改"；顶部"；示例的"；至"；根据#box和#container的高度差。我删除了html代码中的所有css。

Answer 2

试试这个，不要固定位置。主div是相对的，内部div设置为绝对位置。如以下示例。

.container {
padding: 80px 0;
}
.content {
position: relative;
}
.screen {
display: block;
width: 300px;
height: 350px;
overflow: hidden;
position: relative;
border: 2px solid #b3b3b3;
border-radius: 1px;
margin: 0 auto;
}
.screen img {
bottom: -1210px;
width: 100%;
height: auto;
position: absolute;
z-index: 0;
margin:0;
padding:0;
-webkit-transition: top 11s;
-moz-transition: top 11s;
-ms-transition: top 11s;
-o-transition: top 11s;
transition: bottom 11s;
}
.screen:hover img {
bottom: 0;
-webkit-transition: all 11s;
-moz-transition: all 11s;
-ms-transition: all 11s;
-o-transition: all 11s;
transition: all 11s;
}

<div class="container">
<div class="row">
<h2 class="text-center">Scroll on Hover</h2>
<div class="col-md-4 col-md-offset-4 content">
<div class="screen">
<img src="https://i.imgur.com/aFFEZ9U.jpg">
</div>
</div>
</div>
</div><!--container-->