console 命令行工具 X clear

console

var info = [{
    name: "胡杭",
    age: 16
},
{
    name: "胜明",
    age: 22
},
{
    name: "军毅",
    age: 21
},
{
    name: "晓华",
    age: 13
},
{
    name: "盛聪",
    age: 23
},
{
    name: "侦剑",
    age: 32
},
{
    name: "红翔",
    age: 25
},
{
    name: "超维",
    age: 18
},
{
    name: "士琪",
    age: 22
},
{
    name: "艳华",
    age: 20
}
];
let ul = document.querySelector("ul");
let index = 9;
for(let i=0;i<9;i++){
    create_li(i);
}

setInterval(function(){
    ul.style.transform="translateY(-35px)";
    ul.addEventListener("transitionend",function(){
        ul.style.transition="none";
        ul.style.transform="translateY(0)";
        ul.removeChild(ul.firstElementChild);
        getComputedStyle(ul).transition;
        ul.style.transition="";
    },{once:true})
    create_li(index);
    (++index == info.length) && (index = 0);
},1000)

function create_li(i){
let name = info[i].name;
let age = info[i].age
let li = document.createElement("li");
li.innerHTML=`<span>${name}</span><span>${age}</span>`;
ul.appendChild(li);
}

<!DOCTYPE html>
<html>
	<body>
        <div class="bg">
            <div class="box">
                <ul>
                </ul>
            </div>
        </div>
	</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: 0;
}
.bg{
    width: 200px;
    background: linear-gradient(rgb(102,255,183),rgb(46,49,49));
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.box{
    height: 280px;
    background-color: white;
    overflow: hidden;
}
ul{
    transition: all 0.5s;
}
li{
    border: 2px dotted red;
    display: flex;
    justify-content: space-around;
    padding:5px 0;
}