在實際網站制作中，我們時常需要一些視覺效果來增強用戶交互體驗。其中之一就是鼠標滾動效果，它可以讓網頁呈現出隨著鼠標滾動連續展現的效果，視覺效果非常好。本文將介紹如何使用CSS實現鼠標滾動效果。

html, body {
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
overflow-y: auto;
perspective: 1px;
}
.content {
position: relative;
transform: translateZ(-1px);
}
.content >section {
position: relative;
height: 100vh;
}

首先，我們需要將html和body標簽的高度設置為100%并隱藏溢出部分。container元素的高度也需要設置為100%，并使用overflow-y:auto來允許內容超出容器的高度時自動增加滾動條，使得頁面可以滾動。perspective屬性設置了透視效果，傳遞給后代元素的值為1像素，這會使透視效果不突兀。我們需要在content元素中添加transform: translateZ(-1px)，這將對其子元素（我們稍后會創建的content >section元素）應用一個3D轉換。此轉換值為-1px，意味著元素向用戶推進了一個像素。

接下來，創建content元素的子元素——一些連續的section元素，每個元素設置高度為100vh（視窗的高度）。當滾動content元素時，就會讓這些section元素逐個推進屏幕，就像跑馬燈一樣。

Section 1
...
Section 2
...
Section 3
...

使用上面的代碼來創建每個section元素，可以隨意添加和更改元素內的內容。

這樣，當鼠標滾動時，每個section元素將一個接一個地出現在視野中。同時，由于我們為content元素添加了3D轉化，section元素之間的排列方向是彼此重疊的。這樣，我們就成功的實現了鼠標滾動效果。