CSS 自動(dòng)滾動(dòng)效果圖已經(jīng)成為了近年來網(wǎng)站設(shè)計(jì)中十分流行的一種效果，它不僅能增加頁(yè)面的實(shí)用性，還能增加用戶對(duì)網(wǎng)站的好感度。在下面的代碼中，我們將使用 CSS 來創(chuàng)建一個(gè)自動(dòng)滾動(dòng)效果圖。

html,body {
height: 100%;
}
.wrapper {
height: 100%;
overflow: hidden;
position: relative;
}
.scroll {
height: 100%;
width: 100%;
display: flex;
flex-wrap: nowrap;
animation: scroll 20s linear infinite;
}
.scroll-images {
width: 100%;
height: 100%;
margin-right: 20px;
flex-shrink: 0;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

我們首先設(shè)置了頁(yè)面的高度為 100%，這樣可以確保頁(yè)面占滿整個(gè)瀏覽器窗口。接著，在包含滾動(dòng)圖的容器 div 中設(shè)置了 overflow: hidden 和 position: relative，這樣可以限定滾動(dòng)圖只在容器中滾動(dòng)，而不會(huì)超出容器范圍。

然后，我們使用了 flexbox 進(jìn)行布局，將所有圖片放在一個(gè) flex 容器里，并將其 flex-wrap 屬性設(shè)置為 nowrap，以確保所有圖片在同一行。

接下來創(chuàng)建 keyframes，以便在滾動(dòng)時(shí)動(dòng)畫進(jìn)行平移效果。我們將從滾動(dòng)容器在 0% 時(shí)的位置開始，然后在達(dá)到 100% 時(shí)移動(dòng)整個(gè)容器的寬度。我們還將 animation 屬性添加到滾動(dòng)容器上，并將其時(shí)間設(shè)置為 20 秒，以使其平滑滾動(dòng)。

最后的結(jié)果是一個(gè)平滑的自動(dòng)滾動(dòng)效果圖，令人印象深刻和實(shí)用。您可以輕松自定義此示例以適合您的網(wǎng)站需求。