2.1 KiB
2.1 KiB
<html lang="zh-CN">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 30px;
background: #f7f8fa;
}
.container {
max-width: 450px;
margin: 0 auto;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.roll-wrap {
background: #fff;
border-radius: 10px;
padding: 10px 14px;
overflow: hidden;
}
.roll-item {
height: 32px;
line-height: 32px;
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script>
const list = [
"✅ 湘A·12345 奔驰GLC 查询成功",
"✅ 粤B·67890 丰田凯美瑞 查询成功",
"✅ 京A·00011 特斯拉ModelY 查询成功",
"✅ 苏E·88888 大众迈腾 查询成功",
"✅ 沪A·87654 宝马325 查询成功",
"✅ 浙A·11223 奥迪A4L 查询成功",
"✅ 川A·33445 本田思域 查询成功"
];
const box = document.getElementById("rollBox");
let idx = 0;
function showThree() {
box.innerHTML = `
/* 动画：第一行最快，第二行中等，第三行最慢 */ .line1 { animation: slideUp 0.3s ease forwards; } .line2 { animation: slideUp 0.45s ease forwards; } .line3 { animation: slideUp 0.6s ease forwards; }
@keyframes slideUp { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } </style>
</head>实时查询案例
${list[(idx+0)%list.length]}
${list[(idx+1)%list.length]}
${list[(idx+2)%list.length]}
`;
idx += 1;
}
// 初始化
showThree();
setInterval(showThree, 2800); // 每2.8秒刷新3条
</script>
</html>