文字走马灯，手机的弹幕等等。
js可以动态的计算宽度，但js做动画需要定时器，很不方便。
其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。
里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器。
<html>
<head>
<meta charset="utf-8" />
<style>
.scroll-container {
width: 200px;
overflow: hidden;
}
.scroll-container .scroll-container-wrap {
width: 100%;
animation: scroll-container-wrap 8s infinite linear;
}
.scroll-container .scroll-container-content {
float: left;
white-space: nowrap;
min-width: 100%;
animation: scroll-container-content 8s infinite linear;
}
@keyframes scroll-container-wrap {
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(100%);
}
}
@keyframes scroll-container-content {
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<ul>
<li class="scroll-container">
<div class="scroll-container-wrap">
<div class="scroll-container-content">这个是非超长数据不动</div>
</div>
</li>
<li class="scroll-container">
<div class="scroll-container-wrap">
<div class="scroll-container-content">这是一个超长的文本，它将在这里滚动。</div>
</div>
</li>
</ul>
</body>
</html>
