zoukankan      html  css  js  c++  java
  • css3实现轮播

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <style type="text/css">
       div{
        500px;
        height:100px;
        border:2px solid #000;
        padding:0px;
        position: relative;
        overflow: hidden;
        }
        ul{
          list-style: none;
          padding:0px;
          margin: 0px;
          180%;
          position:absolute;
          left:0px;
          top:0px;
          -webkit-animation:3s move infinite linear ;
        }
        @-webkit-keyframes move{
          0%{
            left:0;
          }
          100%{
            left:-500px;
          }
        }
        div:hover ul{
          -webkit-animation-play-state:paused;
        }
        li{
          100px;
          height:100px;
          float:left;
          padding:0;
          margin: 0;
        }
        li img{
          100px;
          height:100px; 
        }
        </style>
    </head>
    <body>
    <div>
      <ul>
          <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
           <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
           <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
          <li><img src="img/psb.jpg"></li>
          <li><img src="img/bsp.jpg"></li>
      </ul>
    </div>
    </body>
    </html>
    

     -webkit-animation:(时间 name 速度)

     -@webkit-keyframes name{

      0%{

      }

    100%{

      left:(左移动- ,右边移动 +)

    }

    }  

  • 相关阅读:
    查看ASM 使用率
    修改一行和修改全表的TX锁
    OCP-1Z0-053-V12.02-683题
    专栏成书亦可行也!——leo鉴书48
    Java用正则表达式判断是否为IP
    OCP-1Z0-053-V12.02-594题
    OCP-1Z0-053-V12.02-585题
    OCP-1Z0-053-V12.02-569题
    OCP-1Z0-053-V12.02-568题
    OCP-1Z0-053-V13.02-517题
  • 原文地址:https://www.cnblogs.com/TTTK/p/6210187.html
Copyright © 2011-2022 走看看