卷軸畫是一種創意設計方式，它利用 CSS 來實現頁面的特效。在這篇文章中，我們將了解如何通過 CSS 來實現卷軸畫的快速向下展開效果。

.scroll-down {
position: relative;
width: 40px;
height: 60px;
}
.scroll-down:before {
content: '';
position: absolute;
top: 0px;
left: calc(50% - 20px);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #fff;
}
.scroll-down:hover:before {
animation: scroll 1s ease-in-out infinite;
}
@keyframes scroll {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}

上述 CSS 代碼實現了一個“快速向下展開”的卷軸畫效果。我們首先創建了一個 class 名為 .scroll-down 的容器。然后，利用 :before 偽元素來創建一個三角形，并將其定位在容器的正上方。這三角形將用作我們的卷軸箭頭。

接下來，我們在:hover 偽類中添加了一個動畫效果，使卷軸箭頭在鼠標懸停時向下快速展開。該動畫使用 animate 屬性，并在:keyframes 中定義其具體的動畫行為。在本例中，我們將箭頭向下移動 10 像素，并在下降期間旋轉動畫。

總的來說，這個卷軸畫效果是簡單、可定制且易于調整的。我們可以通過更改容器的大小和形狀、更改箭頭的樣式或調整動畫的速度來進行任意修改和調整。