绿色字符流从天而降，黑客帝国式的经典背景
← 返回 背景 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .rain{height:220px;border-radius:14px;background:#020b0e;position:relative;overflow:hidden}
.fx .rain i{position:absolute;top:-40px;width:14px;height:160px;background:repeating-linear-gradient(#57ab5a 0 6px,transparent 6px 14px);animation:kfx-fall linear infinite}
.fx .rain i:nth-child(1){left:8%;animation-duration:3.2s}
.fx .rain i:nth-child(2){left:22%;animation-duration:4.4s;animation-delay:.5s;animation-direction:reverse}
.fx .rain i:nth-child(3){left:38%;animation-duration:3.6s;animation-delay:1.2s}
.fx .rain i:nth-child(4){left:55%;animation-duration:5s;animation-delay:.2s;animation-direction:reverse}
.fx .rain i:nth-child(5){left:72%;animation-duration:4s;animation-delay:2s}
.fx .rain i:nth-child(6){left:88%;animation-duration:3s;animation-delay:1.5s}
@keyframes kfx-fall{to{transform:translateY(300px)}}<div class="fx">
<div class="rain"><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>