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:(左移动- ,右边移动 +)

    }

    }  

  • 相关阅读:
    URAL 1948 H
    int、long、long long取值范围
    Bonetrousle HackerRank 数学 + 思维题
    湖南省第十二届大学生计算机程序设计竞赛 problem A 2016
    Abbreviation ---- hackerrank
    POJ 3321 Apple Tree DFS序 + 树状数组
    HDU
    PICO CTF 2013 PHP 2: 85
    XSS进阶三
    XSS进阶二
  • 原文地址:https://www.cnblogs.com/TTTK/p/6210187.html
Copyright © 2011-2022 走看看