全局数字雨飘落效果代码

字符从屏幕顶部持续飘落

适用场景：

• 科技/编程类网站
• 黑客风格主题
• 赛博朋克风格页面
• 程序员个人博客

<style>
.binary-rain-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}
.binary-rain-column{position:absolute;top:-100%;font-family:'Courier New',Consolas,monospace;font-size:14px;line-height:1.2;color:rgba(0,255,136,.8);text-shadow:0 0 8px rgba(0,255,136,.4);writing-mode:vertical-rl;text-orientation:upright;animation:binary-fall linear infinite;will-change:transform;user-select:none}
.binary-rain-column .char-head{color:#fff;text-shadow:0 0 12px rgba(0,255,136,.9),0 0 24px rgba(0,255,136,.5)}
.binary-rain-column .char-tail{opacity:.15}
.binary-rain-column.speed-slow{animation-duration:12s}
.binary-rain-column.speed-normal{animation-duration:8s}
.binary-rain-column.speed-fast{animation-duration:5s}
.binary-rain-column.brightness-dim{color:rgba(0,255,136,.25);text-shadow:none}
.binary-rain-column.brightness-normal{color:rgba(0,255,136,.5);text-shadow:0 0 6px rgba(0,255,136,.3)}
@keyframes binary-fall{0%{transform:translateY(-100%)}100%{transform:translateY(calc(100vh + 100%))}}
@media(prefers-reduced-motion:reduce){.binary-rain-container{display:none}}
</style>

<div class="binary-rain-container" id="binary-rain-container"></div>

<script>
(function(){
    var c=document.getElementById('binary-rain-container');
    if(!c)return;
    function rc(){return'01'[Math.floor(Math.random()*2)]}
    function wc(i,w){var t=w.reduce(function(a,b){return a+b},0),r=Math.random()*t;for(var n=0;n<i.length;n++){r-=w[n];if(r<=0)return i[n]}return i[i.length-1]}
    function mk(){
        var d=document.createElement('div');
        d.className='binary-rain-column';
        d.style.left=Math.random()*100+'%';
        d.classList.add(wc(['speed-slow','speed-normal','speed-fast'],[.3,.5,.2]));
        d.classList.add(['brightness-dim','brightness-normal','brightness-bright'][Math.floor(Math.random()*3)]);
        var n=Math.floor(Math.random()*25)+8,h='';
        for(var i=0;i<n;i++){var cl=i===0?' class="char-head"':i>n-5?' class="char-tail"':'';h+='<span'+cl+'>'+rc()+'</span>'}
        d.innerHTML=h;
        d.style.animationDelay=Math.random()*2+'s';
        d.addEventListener('animationend',function(){if(d.parentNode)d.parentNode.removeChild(d)});
        c.appendChild(d)
    }
    for(var i=0;i<25;i++)setTimeout(mk,Math.random()*3e3);
    setInterval(function(){if(c.children.length<50)mk()},300)
})();
</script>