zoukankan      html  css  js  c++  java
  • 纯css3无缝滚动

    纯css3无缝向左滚动:

    HTML:

    <div class="marqueCon">
        <div class="marque">
            <img src="images/index1.jpg" alt="">
            <img src="images/index2.jpg" alt="">
            <img src="images/index3.jpg" alt="">
            <img src="images/index4.jpg" alt="">
            <img src="images/index5.jpg" alt="">
    <img src="images/index1.jpg" alt=""> <img src="images/index2.jpg" alt=""> <img src="images/index3.jpg" alt=""> <img src="images/index4.jpg" alt=""> <img src="images/index5.jpg" alt=""> </div> </div>
    //注意图片要有重合

    CSS:

            .marqueCon{
                width:1100px;
                margin:0 auto;
                overflow:hidden;
            }
            .marque{
                width:2200px;  //宽度是marqueCon宽度的二倍
                margin:0 auto;
                animation:leftM 15s linear infinite;
            }
            .marque:after{
                content:"";
                display:block;
                clear:both;
            }
            .marque:hover{
                animation-play-state:paused;
            }
            .marque img{
                margin:5px;
                float:left;
                display:block;
                width:210px;
            }
            @keyframes leftM{
                0%{transform:translateX(0px);}
                25%{transform:translateX(-200px);}
                50%{transform:translateX(-500px);}
                75%{transform:translateX(-800px);}
                100%{transform:translateX(-1100px);} //滑动到最左边,即marque宽度的一半
     } 
  • 相关阅读:
    WinForm 资源文件的使用
    php 常量
    netbean使用技巧
    netbeans 7安装xdebug调试php程序
    eclipse 开发技巧
    asp.net 获取客户机IP地址
    NameValueCollection详解
    Paramics插件编程进程间通讯
    Paramics API编程配置
    windows查询端口占用
  • 原文地址:https://www.cnblogs.com/tizi/p/8847869.html
Copyright © 2011-2022 走看看