最近經?？吹揭恍┚W站上的頁面有自動滾屏的效果，很神奇。今天來分享一下如何使用純css實現這個效果。

首先，我們需要用到一個css屬性：@keyframes。@keyframes可以創建一個動畫效果，定義動畫的每一步變化。我們可以通過改變元素的位置或者透明度來達到滾動的效果。

@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}

上面這段代碼定義了一個名為slide的動畫，初始時元素的 translateY（即Y軸方向移動距離）為0，結束時為負100%（即上移一個屏幕的距離）。

接下來，我們需要給要實現滾動效果的元素添加以下樣式：

.scroll {
overflow: hidden;
position: relative;
}
.scroll >* {
position: absolute;
animation: slide 10s linear infinite;
}

首先給外層容器添加了overflow: hidden屬性，這是為了將元素溢出的部分隱藏掉。然后給容器內的子元素設置了絕對定位，同時將元素的動畫設置為slide動畫，每次執行10秒，勻速執行，并且無限循環。

完整的代碼如下：

<div class="scroll">
<div>第一屏</div>
<div>第二屏</div>
<div>第三屏</div>
</div>

注意：這種方法只適用于元素數量確定的情況下，如果需要支持動態添加、刪除元素的情況，需要使用JavaScript來實現。