CSS3紅包雨是一種非常有趣的效果，在網上也越來越流行。這種效果可以通過CSS3實現，無需JavaScript或其他腳本語言的支持。CSS3紅包雨效果的實現主要依靠CSS3的關鍵幀動畫和偽元素的應用。

/*首先定義紅包的樣式*/
.bag {
position: absolute;
width: 50px;
height: 50px;
background-image: url("./redbag.png");
background-size: 100% 100%;
animation: fall 5s infinite linear;
}
/*定義紅包下落的動畫*/
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(2000px);
}
}
/*接下來定義紅包雨的容器*/
.rain {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
/*使用偽元素生成紅包*/
.rain::before {
content: "";
display: block;
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background: url("./redbag.png") repeat-x;
animation: drop 1s infinite linear;
}
/*定義紅包落下的動畫*/
@keyframes drop {
0% {
transform: translateY(0);
}
100% {
transform: translateY(400px);
}
}

以上是使用CSS3實現紅包雨效果的簡單代碼示例。通過將紅包元素設為絕對定位，然后定義下落動畫，就可以讓紅包在頁面上不斷下落。除此之外，使用偽元素生成紅包，可以避免使用JavaScript來動態創建元素，同時還能節省頁面的加載時間。