在網頁設計中，滑屏效果是一個比較常見的元素，它可以讓網頁看起來更加動態、有趣。下面我們就來介紹一下如何用CSS實現上下滑屏效果圖。

html,body{
height:100%;
overflow:hidden;
}
.wrapper{
position:relative;
top:-100%;
}
.wrapper.show{
transition:all 1s ease-in-out;
top:0;
}

首先，我們需要在HTML和body標簽中設置height:100%和overflow:hidden，以防止滾動條的出現。接下來，我們創建一個名為wrapper的CSS類，用來包含我們要滑動的元素。我們將它的position屬性設置為relative，并設置top:-100%來使它從頁面頂部消失。在CSS中，我們還需要創建一個名為.show的類，用于在我們要實現滑動效果時添加到wrapper元素中。這里我們使用transition屬性來為滑動效果添加一個1秒的過渡效果。

第一頁
第二頁
第三頁

最后，我們來看一下HTML結構。我們在wrapper中添加了三個帶有.slide類的子元素，每個子元素中都包含了一個標題元素。這里我們可以根據需要自由添加、刪除或修改滑動元素。

到此為止，我們已經完成了CSS上下滑屏效果圖的實現。為了讓效果顯示出來，我們需要在JavaScript中設置適當的觸發器，也可以使用CSS中的:hover或:focus偽類，或者通過click事件等方法來實現。