破碎

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2025-11-1 21:47 编辑 [/i]

红影

漂亮，图片轮播后自动碎裂呢。
欣赏亚伦老师好帖

杨帆

自然、顺畅的艺术效果，谢谢亚伦老师精彩分享

梦油

欣赏佳作，问候亚伦。

夕阳黄昏

<style>
                #Box {
                        width: 1200px;
                        height:700px;
                        position: relative;
                        overflow: hidden;
                        margin: 100px auto 48px calc(50% - 681px);
                        border:1px solid #000;
                        background-color:lightGray;
                }
                #Box>div {
                        position:absolute;
                        left: 0;
                        top:0;
                        width:100%;
                        height:100%;
                        transform-style:preserve-3d;
                }
                #Box>div>div {
                        position:absolute;
                        transform:preserve-3d;
                }


        </style>
        <div id="Box"></div>


<audio id="mAud" src="https://aod.cos.tx.xmcdn.com/storages/5a70-audiofreehighqps/C0/F2/GAqhqKwMPDUzACAAAAPYpogN.m4a" autoplay ></audio>


<script>
        // 图片
        var pics = ["https://pic1.imgdb.cn/item/683a8d3f58cb8da5c81e820c.jpg","https://pic1.imgdb.cn/item/686265e358cb8da5c87f8d9b.jpg","https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg","https://pic1.imgdb.cn/item/683a8cdf58cb8da5c81e81d1.webp"];
       
       
        //显示第几张图片
        var picIdx = 0, zIdx = 999999, ctrlHandle;
        const rows = 10, cols = 10;
       
        //l 传进来几行；t传进来几列;
        function Boom() {
                //创建一个新的div
                let oParentNode = document.createElement("div");
       
                for(let i = 0; i < cols;i++){
                        for(let j = 0;j<rows;j++){
                                //创建碎片
                                let oDiv = document.createElement("div");
                                //添加背景图片
                                oDiv.style.background = `url(${pics[picIdx]})`;
                                oDiv.style.width = Box.clientWidth / rows + 'px';
                                oDiv.style.height = Box.clientHeight / cols + 'px';
                                oDiv.style.left = (Box.clientWidth / rows) * j +'px';
                                oDiv.style.top = (Box.clientHeight / cols) * i +'px';
                                oDiv.style.backgroundPositionX = (Box.clientWidth/ rows)* -j + 'px';
                                oDiv.style.backgroundPositionY= (Box.clientHeight/cols)* -i + 'px';
                                oDiv.style.transition = (Math.random()*1+0.5)+"s";
                                oParentNode.appendChild(oDiv);
       
                        }
                };
                //设置z-index的值
                oParentNode.style.zIndex = zIdx;
                zIdx--;
                Box.appendChild(oParentNode);
       
       
                let allDiv = oParentNode.children;
                setTimeout(()=>{
                        picIdx++;
                        //picIdx == pics.length && (picIdx = 0);
                        picIdx %= pics.length;
       
                        for(let i= 0;i<allDiv.length;i++){
                                allDiv.style.transform = 'perspective(800px) rotateX('+ (Math.random()*500-250)+'deg) rotateY('+(Math.random()*500-250)+'deg) translateX('+(Math.random()*500-250)+'px) translateY('+(Math.random()*500-250)+'px) translateZ('+(Math.random()*1000-500)+'px)'
                                allDiv.style.opacity = 0;
                        };
                        setTimeout(function(){
                                oParentNode.remove();
                        },3500)
                },2000);
        }
        let runState = () =>        {
                if(mAud.paused)        Box.style.backgroundImage = `url(${pics[picIdx]})`;
                else        Box.style.backgroundImage = `url()`;
        }
        Box.onclick = () => {
                mAud.paused ? (mAud.play(), ctrlHandle = setInterval(Boom, 2500) ) : (mAud.pause(), clearInterval(ctrlHandle) );
        }
        mAud.addEventListener('play', () => runState());
        mAud.addEventListener('pause', () => runState());
        mAud.play().catch(_ = () => runState());


</script>