<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横幅循环滚动</title>
</head>
<style>
.container {
position: relative;
height: 20px;
width: 100%;
max-width: 500px;
margin: auto;
overflow: hidden;
}
.container .scroll-list {
position: absolute;
left: 0;
height: 100%;
animation: scroll-left 20s linear infinite normal;
}
.container .scroll-list span + span {
padding-left: 10em;
}
@keyframes scroll-left {
100% {
left: -52em;
}
}
</style>
<body>
<div class="container">
<div class="scroll-list">
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
<span>文本内容内容内容内容文本内容内容内容内容文本内容内容内容内容</span>
</div>
</div>
</body>
</html>
横幅循环滚动
最新推荐文章于 2024-07-18 15:48:23 发布