css3輪播圖

參考
輪播

<!DOCTYPE html>
<html>
<head>
    <title>ceshi</title>
    <meta charset="utf-8">
    <style type="text/css">
         #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
          #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
          #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
           #photos img{float:left;width:300px;height:200px}
       #photos {  position: absolute;z-index:9;  width: calc(300px*4);/*---修改圖片數量的話需要修改下面的動畫參數*/  }
        .play{ animation: ma 20s ease-out infinite;}
 @keyframes ma {
         0%,25% {        margin-left: 0px;       }
        30%,50% {       margin-left: -300px;    }
        55%,75% {       margin-left: -600px;    }
         80%,100% {       margin-left: -900px;    }




    </style>

</head>
<body>

 <div id="frame" >
    <div id="photos" class="play">
        ![](imgs/1.jpg)
        ![](imgs/2.jpg)
        ![](imgs/3.jpg)
        ![](imgs/4.jpg)
        
            <li>111111111111111</li>
            <li>22222222222222</li>
            <li>33333333333333</li>
            <li>44444444444444</li>
        </ul>
    </div>
</div>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容