<p class="box">
<span class="roll">纯CSS文字滚动播放</span>
</p>
* {
margin: 0;
padding: 0;
}
body{
background: #efefef;
}
.box {
width: 300px;
margin: 10px auto;
overflow: hidden;
background: #fff;
border-radius: 5px;
padding: 5px;
}
.roll {
white-space: nowrap;
animation: 10s loop linear infinite normal;
display: inherit;
}
@keyframes loop {
0% {
transform: translateX(300px);
-webkit-transform: translateX(300px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes loop {
0% {
transform: translateX(300px);
-webkit-transform: translateX(300px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
纯CSS文字滚动播放