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




<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div>
</body>
</html>
css3輪播圖
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 前言 目前市場上的APP中,輪播圖可以說是很常見的。一個好的輪播圖,基本上適用于所有的APP。是時候打造一個自己的...