替换marquee跑马灯方案之CSS动画

前言

在也页面开发中，常见滚动文本使用marquee实现
HTML marquee 元素<marquee>） 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

<marquee>这是一段滚动文本</marquee>

而在现代浏览器规则里，marquee 则已被标明废弃

已废弃: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

既然如此，我们就得寻找新的解决方案，这里使用CSS动画来实现

样式表内容

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

页面上使用

<div class="marquee">
    <p>这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</p>
</div>