文字上下滚动条，无限滚动，自动滚动，纯css实现

css代码

     <style type="text/css">
                @-webkit-keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(0, -307px, 0);
                        transform: translate3d(0, -307px, 0);
                    }
                }
                @keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(0, -307px, 0);
                        transform: translate3d(0, -307px, 0);
                    }
                }
         
                .demo-list{
                    width: 100%;
                    position: relative;
                    height: 140px;
                    overflow: hidden;
                }
         
                .demo-list .rowup{
                    -webkit-animation: 10s rowup linear infinite normal;
                    animation: 10s rowup linear infinite normal;
                    position: relative;
                }
            </style>
    

html代码

    <div class="demo-list">
                                    <div class="rowup">
                                        <div class="item_txt">16号楼首层模板安装验收记录</div>
                                        <div class="item_txt">18号楼28层模板验收记录</div>
                                        <div class="item_txt">19号楼15层模板验收记录</div>
                                        <div class="item_txt">20号楼20层模板验收记录</div>
                                        <div class="item_txt">21号楼11层模板验收记录</div>
                                        <div class="item_txt">22号楼02层模板验收记录</div>
                                        <div class="item_txt">23号楼202层模板验收记录</div>
                                        <div class="item_txt">24号楼14层模板验收记录</div>
                                        <div class="item_txt">25号楼13层模板验收记录</div>
                                        <div class="item_txt">26号楼17层模板验收记录</div>
                                        <div class="item_txt">27号楼03层模板验收记录</div>
                                        <div class="item_txt">28号楼05层模板验收记录</div>
                                        <div class="item_txt">29楼06层模板验收记录</div>
                                        <div class="item_txt">30号楼78层模板验收记录</div>
                                        <div class="item_txt">31号楼58层模板验收记录</div>
                                        <div class="item_txt">32号楼46层模板验收记录</div>
                                        <div class="item_txt">33号楼12层模板验收记录</div>
                                        <div class="item_txt">34号楼11层模板验收记录</div>
                                    </div>
                                </div>
                            </div>