为什么只出现这种小图

img

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    min-height:100vh;
    overflow:hidden;
    background:#000;
}
.container{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    transform-style:preserve-3d;
    perspective:1000px;
}
.container .block{
    position:relative;
    width:10vw;
    height:10vw;
    background:url(2.png);
    background-size:cover;
    background-attachment: fixed;
    background-position:center;
    /* border:1px solid #111;
    box-sizing:border-box; */
    transform-style:preserve-3d;
}


<body>
    <div class="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        let container = document.querySelector('.container');
        for(var i = 0;i <= 450;i++){
           let block = document.createElement('div');
           block.classList.add('block');
           container.appendChild(block);
        }

        let block = document.querySelectorAll('.block');
        let animation = anime.timeline({
            targets: block,
            easing: 'easeInOutExpo',
            loop: true,
            delay:anime.stagger(10,{start:50}),
        })
        
        animation
        .add({
            scale:0,
            translateX:function(){ return anime.random(360,100);},
            translateY:function(){ return anime.random(0,2100);},
            rotate:function(){ return anime.random(-360,360);},
            duration:function(){ return anime.random(500,3000);}

        })
        .add({
            scale:1,
            translateX:0,
            translateY:0,
            rotate:0,
            duration:function(){ return anime.random(500,3000);}

        })
    </script>
</body>

代码呢？