![](https://img2020.cnblogs.com/blog/1217025/202007/1217025-20200715153025527-34842231.png)
/* 左到右滚动展示 */
.left-Right{
position: absolute;
right: -100%;
white-space: nowrap;
animation-name: gun;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes gun {
0%{
right: -400px;
}
100%{
right: 400px;
}
}
<div style=" 400px;height: 100px;border: 1px solid red;overflow: hidden;position: relative;">
<div class="left-Right" id="left-Right">警告:李家口2号有人摆地摊闹事,请尽快处理!</div>
</div>
/* 颠倒字符串顺序
var str = "警告:李家口2号有人摆地摊闹事,请尽快处理!",
len = str.length,
strReverse = '';
for(var i=len-1;i>=0;i--){
strReverse += str.charAt(i);
}
document.getElementById('left-Right').innerHTML = strReverse;
console.log(strReverse)
*/