在網頁設計中，橫向循環滾動圖是一種非常常見的元素，常用于展示廣告、產品等。使用 CSS 來實現橫向循環滾動圖也是非常簡單的。

首先，在 HTML 中加入一個容器元素，以及多個滾動元素。

<div class="scroll-container">
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
</div>

然后，在 CSS 中設置容器元素的寬度和高度，并設置滾動元素為橫向排列，同時利用動畫效果實現橫向循環滾動。

.scroll-container {
width: 100%;
height: 100px;
overflow: hidden;
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 200px;
height: 100%;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 4));
}
}

通過以上 CSS 代碼，我們設置了容器元素為 100% 寬度，100px 高度，并設置了橫向隱藏。滾動元素使用 display:inline-block 顯示橫向排列，寬度為 200px，利用 animation 屬性實現了橫向循環滾動。

通過以上的 HTML 和 CSS 代碼，就可以實現一個簡單的橫向循環滾動圖，如果需要自定義滾動元素的樣式，可以針對 .scroll-item 進行 CSS 樣式設置。