<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.list-box {
height: 30px;
display: flex;
line-height: 30px;
overflow: hidden;
}
.list-box .list {
width: 0;
margin-left: 20px;
flex: 1;
animation: scroll 10s ease 1s infinite; /* 应用动画效果 */
}
.list-box * {
margin: 0;
padding: 0;
list-style-type: none;
}
@keyframes scroll {
0% {
transform: translateY(0); /* 第一条信息 */
}
20% {
transform: translateY(-100%); /* 第二条信息 */
}
40% {
transform: translateY(-200%); /* 第三条信息 */
}
60% {
transform: translateY(-300%); /* 第四条信息 */
}
80% {
transform: translateY(-400%); /* 第五条信息 */
}
100% {
transform: translateY(-480%); /* 最终位置,防止空白和回退 */
}
}
</style>
</head>
<body>
<div class="list-box">
<h4 class="title">资讯:</h4>
<ul class="list">
<li>第一条信息</li>
<li>第二条信息</li>
<li>第三条信息</li>
<li>第四条信息</li>
<li>第五条信息</li>
</ul>
</div>
</body>
</html>
css 停顿轮播动画,竖向滚动
于 2024-01-12 09:46:58 首次发布
本文介绍了如何利用HTML和CSS创建一个资讯列表,通过CSS动画实现逐条显示并滚动加载的效果,提高用户体验。
摘要由CSDN通过智能技术生成