警告滚动展示

 

 

 

/* 左到右滚动展示 */

   .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="width: 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)

            */