码迷,mamicode.com
首页 > Web开发 > 详细

css3简单的图片轮播

时间:2016-10-04 16:11:32      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

    <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>

 

css3简单的图片轮播

标签:

原文地址:http://www.cnblogs.com/cuidan9495/p/5930548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!