css滚动字幕怎么做(css实现文字循环滚动效果)

不用js来实现。

html：

<div class="box">
 <p class="animate">
 求资源网求资源网求资源网求资源网求资源网求资源网求资源网
 </p>
</div>

css：

.box {
 width: 100%;
 margin: 0 auto;
 border: 1px solid #ff6700;
 overflow: hidden;
}

.animate {
 padding-left: 20px;
 font-size: 12px;
 color: #000;
 display: inline-block;
 white-space: nowrap;
 animation: 5s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
 0% {
 transform: translateX(100%);
 -webkit-transform: translateX(100%);
 }
 100% {
 transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 }
}

@-webkit-keyframes wordsLoop {
 0% {
 transform: translateX(100%);
 -webkit-transform: translateX(100%);
 }
 100% {
 transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 }
}