css文字跑马灯,css3实现文字跑马灯（css3跑马灯demo） - 全文

CSS3可以非常方便地实现文字跑马灯效果，下面就介绍一下如何使用CSS3实现文字跑马灯。

HTML部分：

<div class="marquee">
    <p>这是一段需要滚动的文字。</p>
</div>

CSS部分：

.marquee {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}
.marquee p {
    display: inline-block;
    animation: marquee 5s linear infinite;
}
@keyframes marquee {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
}

其中，`.marquee`是包裹滚动文字的容器，`overflow: hidden;`表示超出容器的内容将被隐藏，`white-space: nowrap;`表示不允许换行。`.marquee p`表示滚动的文字部分，`display: inline-block;`表示将文字转成行内块元素，以便可以设置动画。`animation: marquee 5s linear infinite;`表示使用名为`marquee`的动画，持续时间为5秒，线性变化，无限循环。`@keyframes marquee`表示定义名为`marquee`的动画，`from {transform: translateX(0);}`表示从原点（即左侧）开始，`to {transform: translateX(-100%);}`表示向左移动100%的距离，即完全滚出容器。

以上就是使用CSS3实现文字跑马灯的方法，非常简单易用。