文字上下滾動條，無限滾動，自動滾動，純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>