css⽂字左右滚动的实现（类marquee）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Marquee</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100vh;
}
.container{
margin: 0 auto;
/* marquee_list的宽度需要⼤于⽗级的宽度，否则会出现空隙卡顿的现象  */
max-width: 1040px;
background-color: #f5f5f5;
padding: 2rem;
padding-top: 0;
overflow: hidden;
}
.marquee{
width: 100%;
white-space: nowrap;
overflow: hidden;
background-color: #e6e6e6;
line-height: 3rem;
}
.marquee .marquee_list{
display: inline-block;
}
.
marquee .l{
/* 动画名动画时长线性重复播放 */
animation: marquee_rtl 10s linear infinite;
/* 动画时长请根据marquee_list的长度适当调整（即滚动速度） */
}
.marquee .marquee_list.ltr{
/* 动画名动画时长线性重复播放 */
animation: marquee_ltr 10s linear infinite;
/* 动画时长请根据marquee_list的长度适当调整（即滚动速度） */
}
.marquee .marquee_item{
margin-right: 1rem;
}
/* 滚动⽅向：从右到左 */
@keyframes marquee_rtl{
0%{
transform:translate(0, 0);
}
100%{
transform:translate(-100%, 0);
}
}
/
* 滚动⽅向：从左到右 */
@keyframes marquee_ltr{
0%{
transform:translate(-100%, 0);
}
100%{
transform:translate(0, 0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Marquee CSS的实现</h1>
<h2>从右向左滚动</h2>
<div class="marquee">
<div class="marquee_list rtl">
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>html滚动字幕
</div>
<div class="marquee_list rtl">
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
</div>
</div>
<h2>从左向右滚动</h2>
<div class="marquee">
<div class="marquee_list ltr">
<span class="marquee_item">
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
</div>
<div class="marquee_list ltr">
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
<span class="marquee_item">
这是⼀些测试⽂字
</span>
</div>
</div>
</div>
</body>
</html>
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。