CSS是現代前端開發中必不可少的一環，其中常用的技巧之一就是制作圖片左右翻滾動的效果。下面我們來詳細了解一下這個效果的實現方法。

/*CSS樣式*/
.container {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: auto;
}
.imgs {
width: 1000px;
height: 300px;
position: absolute;
left: 0;
top: 0;
animation: roll 10s linear infinite;
}
/*動畫效果*/
@keyframes roll {
from {
left: 0;
}
to {
left: -500px;
}
}

以上代碼中，我們將需要翻滾的圖片放在一個容器內，并將容器的寬度設定為需要顯示的寬度。我們需要制作的是一組圖片在容器內循環滾動的效果，所以我們將容器的overflow設置為hidden，防止超出容器的部分被顯示。

我們接下來開始編寫圖片的CSS樣式。首先，我們讓圖片撐滿容器，然后通過position屬性把它們定位到容器的最左端。接著，我們通過定義動畫效果讓圖片向左移動。這部分采用了CSS3的@keyframes屬性，它可以讓我們定義動畫運行的過程以及效果。

在以上的樣式代碼中，我們定義了一個名為“roll”動畫，它從左側起始位置開始滾動，滾動到最右側，一次循環就完成了。我們通過將動畫的循環次數設為無限循環，可以讓動畫無限循環播放，達到循環滾動的目的。

至此，一個圖片滾動的效果已經完成了。通過以上代碼，我們可以實現圖片左右翻滾動的效果，為網站的視覺效果增加了一份美感。