要實現CSS圖片滾動效果，可以使用CSS動畫和CSS屬性來實現。以下是一種常見的方法：
.container {
width: 100%;
height: 200px; /* 圖片高度 */
overflow: hidden;
}
.slider {
width: 200%; /* 圖片總寬度的兩倍 */
height: 100%;
display: flex;
animation: scroll 10s infinite; /* 設置動畫 */
}
.slider img {
width: 50%; /* 單個圖片的寬度 */
height: 100%;
object-fit: cover;
}
translateX屬性來改變子元素的水平位置。@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /* 每次滾動一個圖片的寬度 */
}
}
<div class="container">
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
這樣，圖片就會在容器內循環滾動顯示。可以通過調整動畫的持續時間和圖片的寬度來改變滾動速度和顯示效果。
