紅包雨是一種常見的Web特效，在年底或其他特殊場合常常能看到。使用純CSS編寫紅包雨特效一方面可以減少文件大小，另一方面也方便使用瀏覽器自帶的渲染引擎進行效果展示。

/* CSS代碼 */
.rain {
position: relative;
width: 50px;
height: 50px;
margin: 10px;
background-image: url('red-envelop.png');
animation: rain 1s linear infinite;
}
@keyframes rain {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(200px);
}
}
.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
z-index: 9999;
}
.wrapper:after {
content: '正在下雪...';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #333;
z-index: 9999;
}
/* HTML代碼 */

通過CSS的animation屬性，我們可以創建一個仿真的“下雨”效果。在這個例子中，我們使用了background-image屬性來設置紅包的外形，并通過transform：translateY屬性來創建紅包下落的動畫效果。接著，我們創建了一個包裝這些紅包的div元素，并使用了fixed定位使其在瀏覽器窗口中居中顯示。當用戶觸發紅包雨特效時，我們還在包裝元素中加入了一個“正在下雪”的提示信息，增加了交互效果。