console 命令行工具 X clear

console

(function(){
// 动态计算安全范围
const getSafeDistance = () => {
    const viewportDiagonal = Math.sqrt(
        window.innerWidth ** 2 + window.innerHeight ** 2
    );
    return Math.floor((viewportDiagonal - window.innerWidth) / 2);
}
const maxSafeDistance = getSafeDistance();

const animationPresets = {
    scalePulse: () => {
        const scale = (0.8 + Math.random() * 0.4).toFixed(2);

        return {
            keyframes: [
                { transform: `scale(1)` },
                { transform: `scale(${scale})` },
                { transform: `scale(1)` }
            ]
        };
    },
    horizontalMove: () => {
        // const distance = Math.floor(Math.random() * 15 + 5);
        const distance = Math.floor(Math.random() * maxSafeDistance * 0.3);
        const direction = Math.random() > 0.5 ? 1 : -1;
        return {
            keyframes: [
                { transform: `translateX(${direction * distance}%)` },
                { transform: `translateX(${-direction * distance}%)` }
            ]
        };
    },
    verticalMove: () => {
        // const distance = Math.floor(Math.random() * 20 + 10);
        const distance = Math.floor(Math.random() * maxSafeDistance * 0.3);
        return {
            keyframes: [
                { transform: `translateY(${distance}%)` },
                { transform: `translateY(-${distance}%)` }
            ]
        };
    },
    rotateSwing: () => {
        const angle = Math.floor(Math.random() * 15 + 5);
        return {
            keyframes: [
                { transform: `rotate(-${angle}deg)` },
                { transform: `rotate(${angle}deg)` }
            ]
        };
    },
    diagonalMove: () => {
        //const distance = Math.floor(Math.random() * 15 + 5);
        const distance = Math.floor(Math.random() * maxSafeDistance * 0.3);
        return {
            keyframes: [
                { transform: `translate(${distance}%, ${distance}%)` },
                { transform: `translate(-${distance}%, -${distance}%)` }
            ]
        };
    }
};

class AnimationManager {
    constructor() {
        this.styleTag = document.createElement('style');
        document.head.appendChild(this.styleTag);
        this.currentAnimation = null;
    }

    generateAnimationParams() {
        const types = Object.keys(animationPresets);
        const type = types[Math.floor(Math.random() * types.length)];
        return {
            type,
            duration: Math.floor(Math.random() * 10 + 5),
            timing: ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'][Math.floor(Math.random() * 5)]
        };
    }

    createAnimation() {
        const params = this.generateAnimationParams();
        const { keyframes } = animationPresets[params.type]();
        const animationName = `anim-${Date.now()}`;

        // 创建关键帧
        let css = `@keyframes ${animationName} {`;
        keyframes.forEach((frame, index) => {
            css += `${(index * 100) / (keyframes.length - 1)}% { 
        transform: ${frame.transform}; 
      }`;
        });
        css += '}';

        let bgUrl = document.querySelector('.mmPlayer-bg').style['background-image'] 

        // 应用动画样式
        if (bgUrl) {
            css += `.mmPlayer-bg::before {
                animation: ${animationName} ${params.duration}s ${params.timing} infinite;
                background-image: `+bgUrl+`;
            }`;
        } else {
            css += `.mmPlayer-bg::before {
                animation: ${animationName} ${params.duration}s ${params.timing} infinite;
            }`;
        }

        this.styleTag.textContent = css;
        this.currentAnimation = animationName;
    }

    startRandomCycle() {
        this.createAnimation();
        setTimeout(() => this.startRandomCycle(), (Math.random() * 5 + 5) * 1000);
    }
}

// 初始化动画系统
const animator = new AnimationManager();
animator.startRandomCycle();

// 窗口大小变化处理
window.addEventListener('resize', () => {
    document.querySelector('.mmPlayer-bg').style.backgroundSize = 'cover';
});
})()

<body>
<div class="mmPlayer-bg"></div>
</body>

.mmPlayer-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vw;
    /* 扩展可视区域 */
    height: 150vh;
    transform: translate(-50%, -50%);
    overflow: hidden;
    /* 隐藏溢出内容 */
    z-index: -1;
    will-change: transform;
    /* 预声明变化属性 */
    backface-visibility: hidden;
    /* 隐藏背面 */
}

.mmPlayer-bg::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background-image: url('https://p2.music.126.net/iBZWVshMiRIGH1BMFhebSA==/109951168606827722.jpg?paramx=300y300');
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    /* opacity: 0.2; */
    filter: blur(50px);
}