22.一个小小的广播效果

效果对比图会滚动，脑补一下

 DOM

<div class="live-broadcast">
    <div class="live-logo">
        lolologo
    </div>
    <div class="gundong">
    <ul>
        <li class="fc-item" style="margin-top: -120px;">开局一把刀一条狗,装备全靠捡</li>
        <li class="fc-item">刀塔传奇,是兄弟就来挖我</li>
        <li class="fc-item">一起打群架</li>
        <li class="fc-item">是兄弟就来砍我</li>
    </ul>
</div>
    <div class="clearfix">
                
    </div>
</div>

CSS

                        .clearfix{
                clear: both;
            }
            body{
                width: 500px;
                margin: 0 auto;
            }
            .live-broadcast{
                background: black;
                width: 400px;
            }
            .live-broadcast{
                color: #eee;
                margin-top: 10px;
                margin-left: 20px;
                
            }
            .live-logo{
                float: left;
                width: 79px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                /*border: 1px solid #EEEEEE;*/
                /*border-radius: 20px;*/
                
                
            }
            .live-broadcast>.gundong{
                float: left;
                width: 300px;
                height: 40px;
                overflow: hidden;
            }
            
            .gundong li{
                margin-left: 10px;
                height: 40px;
                font-size: 14px;
                line-height: 20px;
                list-style: none;
                transition: all 0.5s ease-in;
            }        

JS（也可以单一只用css来实现），依赖JQ

var item =  $('.fc-item:first-child'),i=0;
setInterval(function(){
                
    item.css({
        'marginTop':-i*40+'px'
    })
        i++;
        if(i==4){
            i=0
        }
},3000)

 /*******************************************************/

纯css实现版本

　　　　　　　.clearfix{
                clear: both;
            }
            body{
                width: 500px;
                margin: 0 auto;
            }
            .live-broadcast{
                background: black;
                width: 400px;
            }
            .live-broadcast{
                color: #eee;
                margin-top: 10px;
                margin-left: 20px;
                
            }
            .live-logo{
                float: left;
                width: 79px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                /*border: 1px solid #EEEEEE;*/
                /*border-radius: 20px;*/
                
                
            }
            .live-broadcast>.gundong{
                float: left;
                width: 300px;
                height: 40px;
                overflow: hidden;
            }
            
            .gundong li{
                margin-left: 10px;
                height: 40px;
                font-size: 14px;
                line-height: 20px;
                list-style: none;
                transition: all 0.5s ease-in;
            }
            .gundong li:first-child{
                animation: broadcast 12s infinite;
            }
            @keyframes broadcast{
                0%{margin-top: 0px;}
                12.5%{margin-top: 0px;}
                25%{margin-top: -40px;}
                37.5%{margin-top: -40px;}
                50%{margin-top: -80px;}
                62.5%{margin-top: -80px;}
                75%{margin-top: -120px;}
                87.5%{margin-top: -120px;}
                100%{margin-top: 0px;}
            }

DOM

<div class="live-broadcast">
            <div class="live-logo">
                lolologo
            </div>
            <div class="gundong">
                <ul>
                    <li class="fc-item">开局一把刀一条狗,装备全靠捡</li>
                    <li class="fc-item">刀塔传奇,是兄弟就来挖我</li>
                    <li class="fc-item">一起打群架</li>
                    <li class="fc-item">是兄弟就来砍我</li>
                </ul>
            </div>
            <div class="clearfix">
                
            </div>
        </div>