63.纯css实现文字左右循环滚动效果

前言：新开的一个项目里，要求每个页面正上方都要有滚动播报，所以先用css实现一下循环滚动效果（后续需要持续播报1分钟以及及时更换内容，可能就要用到js了......）

1.首先在页面确定滚动播报位置及信息

<div class="search-network">
  <i class="el-icon-microphone">广播栏：</i>
  <div id="box">
     <span class="animate">滚动播放消息，持续1分钟，如果连续，则及时更新最新消息。</span>
  </div>
</div>

2.设置样式

 值得注意的是，需要先设置span父元素的overflow:hidden、display:inline-block ；

.search-network{
    background: @searchFormBgColor;
    font-size:15px; 
    padding:12px 20px;
    width: calc(100% - 80px);
    margin: 0 auto;
    box-shadow: 2px 3px 8px @searchFormShowColor;
    margin-bottom: 10px;
    color: @formLabelColor;
    #box{
        display: inline-block;
        vertical-align: bottom;
        overflow: hidden;
        .animate {
            padding-left: 20px;
            display: inline-block;
            white-space: nowrap;
            animation: 20s 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%);
            }
        }
    }
}

3.仔细看还会发现#box的样式里，多了：vertical-align: bottom;

因为给inline-block元素设置overflow:hidden 后， 和它相邻的元素就会往下移，所以要对inline-block元素设置下对齐。