<div class="wrap">
<span class="mt10">获得一份1</span>
<span class="mt10">获得一份2</span>
<span class="mt10">获得一份3</span>
<span class="mt10">获得一份4</span>
<span class="mt10">获得一份5</span>
<span class="mt10">获得一份6</span>
<span class="mt10">获得一份7</span>
<span class="mt10">获得一份8</span>
<span class="mt10">获得一份9</span>
<span class="mt10">获得一份10</span>
<span class="mt10">获得一份11</span>
<span class="mt10">获得一份12</span>
<span class="mt10">获得一份13</span>
</div>
css
.wrap {
width: 400px;
height: 200px;
border: 1px solid red;
background-color: grey;
overflow: scroll;
}
.wrap span {
display: block;
background-color: white;
width: 100%;
height: 20px;
line-height: 20px;
transition: all ease 500ms;
-webkit-transition: all ease 500ms;
}
.mt10 {
margin-top: 10px;
}
.mt-20 {
margin-top: -20px;
}
js
var wrap = document.querySelector('.wrap')
var firstChild = null;
setInterval(() => {
firstChild = wrap.children[0]
firstChild.classList.remove('mt10')
firstChild.classList.add('mt-20')
setTimeout(() => {
wrap.appendChild(firstChild)
firstChild.classList.remove('mt-20')
firstChild.classList.add('mt10')
}, 500)
}, 1000)
效果演示: