HTML页面中纯CSS搞的文字轮播滚动，跑马灯效果

整体思路：采用animation循环动画，搭配CSS属性做到循环滚动，再根据文案长短动态设置动画时长。

两个方案:

方案1：适合文字滚动的文字比较短

Html页面：

<div class="out">
        <p class="animate">
            文字循环滚动的内容
        </p>
    </div>

CSS设置：

  .out {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display: inline-block;
            white-space: nowrap;
            animation: 10s wordsLoop linear infinite normal;
        }
        
        @keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

方案2：适合滚动文字比较长，优点就是一个滚动完了，另外一个紧接着出来，

HTML页面：

<div class="marquee-outer-wrapper">
        <div class="marquee-inner-wrapper">
            <span class="first-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
            <span class="second-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
        </div>
    </div>

CSS设置：

   .marquee-outer-wrapper {
            overflow: hidden;
            width: 100%;
        }
        
        .marquee-inner-wrapper {
            background: #eee;
            height: 40px;
            font-size: 14px;
            color: red;
            line-height: 40px;
            margin: 0 auto;
            white-space: nowrap;
            position: relative;
        }
        /* 需要将两个文字内容一样的span放在最右边 */
        
        .marquee-inner-wrapper span {
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
        }
        /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
        
        .first-marquee {
            -webkit-animation: 25s first-marquee linear infinite normal;
            animation: 25s first-marquee linear infinite normal;
            padding-right: 70%;
        }
        
        @keyframes first-marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            /* 向左移动 */
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
        
        .second-marquee {
            /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
            -webkit-animation: 25s first-marquee linear 12s infinite normal;
            animation: 25s first-marquee linear 12s infinite normal;
            padding-right: 53%;
        }
        
        @keyframes second-marquee {
            0% {
                -webkit-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }