瞎写的 用了setInterval以及transition
css：
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.home{
box-sizing: border-box;
padding: 100px;
width: 650px;
display: flex;
margin: auto;
}
.home .title{
height: 300px;
width: 500px;
}
.title h2{
line-height: 300px;
}
.home .ul-list{
height: 300px;
width: 500px;
position: relative;
}
.mask{
background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);
z-index: 5;
height: 100%;
width: 100%;
position: absolute;
left: -20px;
}
.list{
height: 100%;
overflow: hidden;
position: relative;
}
ul{
height: 100%;
width: 100%;
position: absolute;
top: 0;
transition: top 1s;
box-sizing: content-box;
padding-right: 20px;
padding-left: 0;
list-style: none;
margin-bottom: 0;
}
ul li{
font-size: 30px;
height: 40px;
}
</style>
html：
<body>
<div class="home">
<div class="title">
<h2>VS Code for</h2>
</div>
<div class="ul-list">
<div class="mask">
</div>
<div class="list">
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
<li>10000</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
<li>10000</li>
</ul>
</div>
</div>
</div>
</body>
js：
<script>
var timing=null;
timing=setInterval(function () {
addTop();
console.log(parseInt($("#list").css('top')))
if (parseInt($("#list").css('top'))<=-510){
// clearInterval(timing)
$("#list").css("top",0+'px')
}
},1500)
addTop=function () {
var num =parseInt($("#list").css('top'))
$("#list").css("top",(num-30)+'px')
}
</script>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
