說起網(wǎng)頁全屏效果，相信很多人都能想到代碼雨。代碼雨在 Web 前端開發(fā)中可以用來增加頁面的互動(dòng)性和視覺效果。那么，如何用 CSS 來實(shí)現(xiàn)一個(gè)基礎(chǔ)的網(wǎng)頁全屏代碼雨呢？

.container {
position: relative;
width: 100%;
height: 100vh;
background-color: #000000;
overflow: hidden;
}
.rain {
position: absolute;
width: 1px;
height: 30px;
top: -30px;
background-color: #ffffff;
animation: fall 1s infinite linear;
}
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}

以上代碼需要在一個(gè)容器元素（例如 div）中使用。容器元素的寬度和高度必須使用 100% 或者 100vh 來占滿整個(gè)視窗。同時(shí)，容器元素的背景顏色可以根據(jù)需求進(jìn)行更改。

然后，在容器元素中創(chuàng)建一個(gè)“雨滴”元素，即 class 為 rain 的 div 元素，它是絕對(duì)定位的，并且高度為 30px，寬度為 1px。通過動(dòng)畫關(guān)鍵幀實(shí)現(xiàn)“雨滴”掉落的效果。在 CSS 中使用 animation 屬性即可。

至此，一個(gè)簡(jiǎn)單的全屏代碼雨效果就完成了，可以通過 JS 添加更多的“雨滴”元素，或者在“雨滴”元素上添加更多的樣式來達(dá)到更多的視覺效果。