跑马灯简单实现

<div class="marquee">这是跑马灯效果的文字，它会左右滚动。</div>

.marquee {
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
box-sizing: border-box; /* 确保padding不影响总宽度 */
position: relative; /* 相对于这个元素定位 */
width: 100%; /* 容器宽度 */
height: 20px; /* 容器高度 */
line-height: 20px; /* 行高与容器高度相同 */
background-color: #f0f0f0; /* 背景颜色 */
padding: 0 10px; /* 内边距 */
}

.marquee::before, .marquee::after {
content: attr(data-text); /* 使用data-text属性复制内容 */
position: absolute;
top: 0;
width: 100%;
background-color: #f0f0f0; /* 背景颜色 */
animation: marquee 5s linear infinite; /* 应用动画 */
}

.marquee::before {
left: 0;
text-indent: 0;
}

.marquee::after {
left: 100%; /* 开始时完全不在视图中 */
text-indent: 100%; /* 开始时完全不在视图中 */
}

@keyframes marquee {
0% { text-indent: 100%; } /* 开始时完全不在视图中 */
100% { text-indent: -100%; } /* 滚动结束后移出视图 */
}