css动画控制左右轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
<title>Css3无缝轮播</title>    
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    
<meta name="apple-mobile-web-app-capable" content="yes">    
<meta name="apple-mobile-web-app-status-bar-style" content="black">    
<meta name="format-detection" content="telephone=no">    
<style>    
    @keyframes move{ 
    0%,20%{    
        transform:translateX(0px);    
    }    
    20%,40%{    
        transform:translateX(-300px);    
    }     
    40%,60%{    
        transform:translateX(-600px);    
    }    
    60%,80%{    
        transform:translateX(-900px);    
    }  
    80%,100%{    
        transform:translateX(-1200px);    
    }   
	/*上面为继承效果无过渡平均分5份 0%20%,25%50%,55%70%,75%100% 这种是过渡效果4份看实际情况分析*/    
}    
    .wrap{    
        width: 300px;    
        height: 200px;    
        margin: 0 auto;    
        overflow: hidden;    
         border: 5px solid red;    
    }    
    ul{    
        list-style: none;    
        margin: 0;    
        padding:0;    
    }    
    .list{    
        width: 500%;/*对应图片的数量*/    
        animation:move 10s infinite;    
    }    
    .list li{    
        float: left;    
    }    
    img{    
        width: 300px;    
        height: 200px;    
    }    
</style>    
</head>    
<body>    
 <div class="wrap">    
    <ul class="list">    
        <li><img src="img/1.jpg" alt=""></li>    
        <li><img src="img/2.jpg" alt=""></li>    
        <li><img src="img/3.jpg" alt=""></li>    
        <li><img src="img/4.jpg" alt=""></li>    
        <li><img src="img/1.jpg" alt=""></li>  
    </ul>    
 </div>    
</body>    
</html>
css动画控制左右轮播

猜你喜欢
