css3左右滾動圖片

在網頁設計過程中，展示圖片是非常重要的一項工作。有時候我們需要很方便的讓圖片左右滾動，這時候我們可以使用CSS3中的一些屬性來實現。

首先，我們需要為滾動圖片的容器設置一個寬度和高度，并將“overflow”屬性設置為“hidden”，這樣可以確保圖片在容器中不會超出預定的范圍而溢出。接下來，我們需要定義一個內部容器，其寬度應該足夠容納所有的圖片，并將其“display”屬性設置為“flex”，這樣可以保證所有圖片放在一行上。最后，我們為圖片設置一個“transform”屬性，將其移動到左側或者右側，然后添加一些動畫來實現滾動的效果。

.slider {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider .imgs {
display: flex;
width: max-content;
position: absolute;
top: 0;
left: 0;
animation: slide 15s linear infinite;
}
.slider .imgs img {
margin-right: 20px;
transform: translateX(-100%);
}
.slider .imgs img:last-child {
margin-right: 0;
transform: translateX(0);
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

在上面的代碼示例中，我們使用了一個名為“.slider”的容器，其中我們創建了一個名為“.imgs”的內部容器，以及一些帶有“img”標簽的圖片。我們在“.imgs”內部容器中將“display”屬性設置為“flex”，并使用“translateX”函數在“transform”屬性中將每張圖片移動到其左側或右側。此外，我們還使用了名為“slide”的動畫來實現圖片的滑動效果。這個動畫在15秒內完成一次，使用了線性的時間函數，并且設置它可以無限循環。

最后，我們可以在HTML中使用這些代碼來創建一個左右滾動的圖片展示：