CSS圖片向上間歇式滾動是一種頁面展示效果。在該效果下，頁面上的圖片呈現出向上滾動的特效，并且具有一定的暫停時間，讓觀看者更好地欣賞。下文將為大家介紹如何實現CSS圖片向上間歇式滾動效果。

html {
background-color: #f5f5f5;
font-family: Lato;
}
.container {
width: 600px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
position: relative;
}
.container img {
width: 100%;
height: auto;
position: absolute;
left: 0;
}
.container img:nth-child(1) {
animation: slide 8s infinite;
}
.container img:nth-child(2) {
animation: slide 8s infinite;
animation-delay: 2s;
}
.container img:nth-child(3) {
animation: slide 8s infinite;
animation-delay: 4s;
}
@keyframes slide {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-100%);
}
50% {
transform: translateY(-100%);
}
75% {
transform: translateY(-200%);
}
100% {
transform: translateY(-200%);
}
}

首先，我們需要在HTML文件中創建一個容器，將需要展示的圖片放在里面。然后，在CSS文件中，設置容器的寬度、內邊距、外邊距、溢出隱藏等屬性，并且將圖片樣式設置為絕對定位，這樣才能實現左邊距為0的效果。

接著，我們通過nth-child選擇器，為每個圖片單獨添加動畫效果和動畫延遲時間。此處推薦的動畫方式是深入淺出的單/double slide效果。我們通過keyframes為動畫設置時間和變化規則。

最后，CSS圖片向上間歇式滾動效果就完成了。在這種效果下，圖片呈現出優美的向上滾動效果，并且具有一定的停頓時間，更好地吸引了觀眾的注意力。