HTML添加数据雨特效

数据雨效果如图：

css部分：

.copyright-content {
    display: none !important;
}
body.site-has-matrix-rain #matrix-rain-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: -2;
  overflow: hidden;
  font-family: 'Courier New', monospace;
}

body.site-has-matrix-rain #matrix-canvas {
  display: block;
  background: transparent;
}

.matrix-char {
  position: absolute;
  font-weight: 500;
  animation-timing-function: linear;
}

.matrix-char.head-char {
  color: #ffffff !important;
  text-shadow: 0 0 15px #ffffff, 0 0 25px #0077ff, 0 0 35px #0077ff !important;
  font-weight: bold !important;
  font-size: 1.2em !important;
}

.matrix-char.body-char {
  color: #80ffff !important;
  text-shadow: 0 0 8px rgba(128, 255, 255, 0.7) !important;
}

.matrix-char.tail-char {
  color: #0080ff !important;
  text-shadow: 0 0 5px rgba(0, 128, 255, 0.5) !important;
}
.full-blog-holder {
    display: flex;
    gap: 20px; 
    max-width: 1400px; 
    margin: 0 auto;
    padding: 0 15px;
}

js部分（需php封装）：

function matrix_rain_effect() {
    ?>
    <style type="text/css">
body.site-has-matrix-rain #matrix-rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.6);
    opacity: 0.9;
    filter: brightness(1.2);
}

body.site-has-matrix-rain .matrix-column {
    position: absolute;
    top: 0;
    width: 1.2em;
    text-align: center;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: translateY(-100%);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

body.site-has-matrix-rain .matrix-char {
    display: block;
    opacity: 0;
    animation: char-fade 2s ease-out forwards;
    font-weight: 500;
    margin-bottom: 2px;
    will-change: opacity, transform;
}

body.site-has-matrix-rain .matrix-char:first-child {
    color: #00ffff; 
    text-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff, 0 0 35px #0077ff;
    font-weight: bold;
    font-size: 1.2em;
}

body.site-has-matrix-rain .matrix-char:nth-child(4n) {
    color: #80ffff;
    text-shadow: 0 0 8px rgba(128, 255, 255, 0.7);
}


@keyframes matrix-fall {
    0% { 
        transform: translateY(-100%);
        opacity: 1;
    }
    90% {
        opacity: 0.9;
    }
    100% { 
        transform: translateY(150vh);
        opacity: 0;
    }
}

@keyframes char-fade {
    0% { 
        opacity: 0;
        transform: translateY(-10px);
    }
    20% { 
        opacity: 1;
        transform: translateY(0);
    }
    80% { 
        opacity: 0.8;
    }
    100% { 
        opacity: 0;
        transform: translateY(5px);
    }
}
</style>

<script type="text/javascript">
(function() {
    'use strict';


    const container = document.createElement('div');
    container.id = 'matrix-rain-container';
    document.body.appendChild(container);
    document.body.classList.add('site-has-matrix-rain');

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    container.appendChild(canvas);

    const config = {
        fontSize: 18,
        speed: 3, 
        characterChain: '0111001010010111001010100', 
        glowIntensity: 0.6,
        columns: 0,
        density: 0.7, 
        fadeInDuration: 0.3, 
        fadeOutDuration: 0.3 
    };

    let drops = [];
    let animationId = null;
    let lastTime = 0;
    const fixedCharacterChain = config.characterChain.split('');


    function init() {
        resizeCanvas();
        createDrops();
        if (animationId) {
            cancelAnimationFrame(animationId);
        }
        lastTime = performance.now();
        animate();
        window.addEventListener('resize', onResize);
        window.addEventListener('visibilitychange', onVisibilityChange);
    }

    function resizeCanvas() {
        const width = window.innerWidth;
        const height = window.innerHeight;

        if (canvas.width !== width || canvas.height !== height) {
            canvas.width = width;
            canvas.height = height;
          
            config.columns = Math.floor((width / config.fontSize) * config.density);
        }
    }

  
    function createDrops() {
        drops = [];
        const columnWidth = canvas.width / config.columns;
        
        for (let i = 0; i < config.columns; i++) {

            const x = i * columnWidth + Math.random() * columnWidth * 0.5;
            drops.push({
                x: x,
                y: Math.random() * -canvas.height * 2, 
                speed: config.speed * (0.8 + Math.random() * 0.4), 
                characters: [...fixedCharacterChain], 
                charPositions: new Array(fixedCharacterChain.length).fill(0),
                startTime: Date.now() + Math.random() * 5000, 
                currentIndex: 0,
                isActive: false
            });
        }
    }


    function calculateAlpha(drop, charIndex, currentY) {
        const totalChars = drop.characters.length;
        const progress = charIndex / totalChars;
        
 
        if (progress < config.fadeInDuration) {
            return progress / config.fadeInDuration;
        }
      
        else if (progress > (1 - config.fadeOutDuration)) {
            return (1 - progress) / config.fadeOutDuration;
        }

        else {
            return 1;
        }
    }


    function animate(currentTime = 0) {
        const deltaTime = currentTime - lastTime;
        lastTime = currentTime;


        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.font = `bold ${config.fontSize}px 'Courier New', monospace`;
        ctx.textAlign = 'center';

        for (let i = 0; i < drops.length; i++) {
            const drop = drops[i];
            

            if (!drop.isActive && Date.now() > drop.startTime) {
                drop.isActive = true;
            }
            
            if (!drop.isActive) continue;


            drop.y += drop.speed * (deltaTime / 16); // 基于时间增量确保匀速

        
            for (let j = 0; j < drop.characters.length; j++) {
                const charY = drop.y - j * config.fontSize;
                
              
                if (charY > -config.fontSize && charY < canvas.height + config.fontSize) {
                    const alpha = calculateAlpha(drop, j, charY);
                    
                    if (alpha <= 0) continue;

            
                    const blueIntensity = Math.floor(alpha * 255);
                    const color = `rgba(0, ${blueIntensity}, ${blueIntensity}, ${alpha})`;
                    
       
                    ctx.shadowBlur = 10 * alpha;
                    ctx.shadowColor = `rgba(0, 255, 255, ${alpha * config.glowIntensity})`;
                    ctx.fillStyle = color;
                    
                    ctx.fillText(drop.characters[j], drop.x, charY);
                }
            }


            if (drop.y - (drop.characters.length * config.fontSize) > canvas.height) {
                resetDrop(drop);
            }
        }

        animationId = requestAnimationFrame(animate);
    }


    function resetDrop(drop) {
        drop.y = Math.random() * -canvas.height * 2;
        drop.x = Math.random() * canvas.width; // 随机x位置确保均匀
        drop.startTime = Date.now() + Math.random() * 2000; // 随机延迟
        drop.isActive = false;
        drop.speed = config.speed * (0.8 + Math.random() * 0.4);
    }


    function onResize() {
        resizeCanvas();
        createDrops();
    }

 
    function onVisibilityChange() {
        if (document.hidden) {
            if (animationId) {
                cancelAnimationFrame(animationId);
                animationId = null;
            }
        } else {
            if (!animationId) {
                lastTime = performance.now();
                animate();
            }
        }
    }


    init();

})();
</script>
    <?php
}
add_action('wp_footer', 'matrix_rain_effect');