在HTML5中，可以非常方便地實現圖片無縫循環滾動。下面我們來看一段示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片無縫循環滾動</title>
<style>
#container {
width: 100%;
height: 300px;
overflow: hidden;
}
#list {
list-style: none;
width: 200%;
height: 300px;
margin: 0;
padding: 0;
animation: scroll 20s linear infinite;
}
#list li {
float: left;
width: 50%;
height: 300px;
}
#list li img {
width: 100%;
height: 100%;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div id="container">
<ul id="list">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
</div>
</body>
</html>首先，我們創建了一個容器，設定了其寬度和高度，并將其 overflow 屬性設為 hidden，以便在其內部滾動圖片時不會出現滾動條。接著，我們創建了一個列表，將其寬度設為容器的兩倍，并給其內部的每個列表項設定了寬度為容器寬度的一半，這樣每個列表項就占了整個容器的一半，以便我們將兩張圖片組合成一張。我們還為列表設定了 margin 和 padding 為 0，以便每個列表項之間不會出現間隔。最后，我們用 CSS3 中的 animation 屬性為列表項設定了一個持續時間為 20 秒的動畫，以及一個線性平滑的過渡效果，并將其設置為無限循環。而關鍵在于我們使用了 CSS3 中的 transform 屬性，將圖片的位置左移了容器寬度的一半，從而實現了滾動效果。在此基礎上，我們只需要將這個代碼復制到自己的 HTML 文件中，修改圖片文件名和路徑即可。
上一篇html5的代碼約定