89 lines
2.1 KiB
Markdown
89 lines
2.1 KiB
Markdown
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
<title>三行向上滚动（速度不同）</title>
|
||
|
|
<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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 动画：第一行最快，第二行中等，第三行最慢 */
|
||
|
|
.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>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="title">实时查询案例</div>
|
||
|
|
<div class="roll-wrap" id="rollBox"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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 = `
|
||
|
|
<div class="roll-item line1">${list[(idx+0)%list.length]}</div>
|
||
|
|
<div class="roll-item line2">${list[(idx+1)%list.length]}</div>
|
||
|
|
<div class="roll-item line3">${list[(idx+2)%list.length]}</div>
|
||
|
|
`;
|
||
|
|
idx += 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
showThree();
|
||
|
|
setInterval(showThree, 2800); // 每2.8秒刷新3条
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|