淘寶網是一個非常著名的網購平臺，為了吸引客戶，他們經常會添加一些酷炫的效果。其中，下雨效果是一種比較常見的效果，下面我們來看一下如何實現淘寶網下雨效果的CSS代碼。

/* 下雨效果 */
@keyframes rain {
from {
transform: translateY(-20px);
}
to {
transform: translateY(800px);
}
}
.raindrop {
position: absolute;
width: 2px;
height: 20px;
background: #fff;
box-shadow: 1px 1px 1px rgba(255,255,255,0.5);
animation: rain 1.5s linear infinite;
}
/* 生成隨機位置的下雨滴 */
@for $i from 1 to 60 {
.raindrop:nth-of-type(#{$i}) {
left: random(100%);
top: random(100%);
animation-delay: (random(1500) / 1000) + "s";
}
}

可以看到，這段代碼最核心的部分就是下雨動畫的定義，我們使用了一個keyframes關鍵字開始定義。接著，我們定義每一滴雨的樣式為一段代碼塊，并將其絕對定位于頁面上。最后，我們使用for循環生成60個隨機位置下雨滴，并設置不同的延遲時間，讓雨滴的下落看起來更加自然。

這樣，我們就可以通過CSS代碼實現一個非常好看的下雨效果，并且不需要使用JavaScript。當然，這段代碼只是一個簡單的示例，如果你想要自己實現更為高級的下雨效果，還需要借助于更多的CSS技巧。