岛与_暮歌

导航

css3简单的图片轮播 

    <style>
    @-webkit-keyframes move{
        0%{left:0px;}
        100%{left:-500px;}
    }
    #wrap{
        width:500px;
        height:100px;
        border:1px solid #000000;
        position:relative;
        margin:100px auto;
        overflow:hidden;
      
    }
    /*定位的时候可以不写px*/
    #list{
               position:absolute;
               left:0;
               padding:0px;
               padding:0px;
               -webkit-animation:3s move infinite;width:200%;  
            }    
      #list li{
    list-style:none;
    width:98px;
    height:98px;
    border:1px solid #234aab;
    color:#ffffff;
    background:#000;
    font-size:50px;
    text-align:center;
    float:left;
} 
     /*-webkit-animation-play-state:paused;当鼠标放上去时停止*/
     #wrap:hover #list{
       -webkit-animation-play-state:paused;
     }
    </style>
</head>
<body>

    <div id="wrap">
    <!-- li{$}*5 -->
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

 

posted on 2016-10-04 15:26  岛与_暮歌  阅读(175)  评论(0)    收藏  举报