zoukankan      html  css  js  c++  java
  • 文字上下滚动条,无限滚动,自动滚动,纯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{
                         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>

  • 相关阅读:
    JSP学习笔记
    Java之String、StringBuffer、StringBuilder的区别
    Android开发笔记——Handler总结
    深搜_八皇后(HDU_2553)
    广搜_优先队列和记录搜索路径(HDU_1026)
    深搜_素数环(HDU_1016)
    深搜_奇偶减枝(HDU_1010)
    转载 ASP.NET MVC学习之(5):Html.ActionLink
    启动万维网发布服务(W3SVC)
    What is POID
  • 原文地址:https://www.cnblogs.com/njccqx/p/13745825.html
Copyright © 2011-2022 走看看