破碎
本帖最后由 亚伦影音工作室 于 2025-11-1 21:47 编辑 <br /><br /><style>#box {
width: 1200px;
height:700px;
position: relative;
overflow: hidden;
margin: 10px -300px;
border:1px solid #000;
}
#box>div {
position:absolute;
left: 0;
top:0;background:#800 url(https://pic1.imgdb.cn/item/6397a78fb1fccdcd365e4aa9.jpg)no-repeat center / cover;
width:100%;
height:100%;
transform-style:preserve-3d;
}
#box>div>div {
position:absolute;
transform:preserve-3d;
}
</style>
<div id="box"></div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5a70-audiofreehighqps/C0/F2/GAqhqKwMPDUzACAAAAPYpogN.m4a" autoplay ></audio>
<script>
//
var imgs = ["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"];
//z-index
var z = 999999;
//
var index = 0;
var box = document.getElementById('box')
boom(10,10)
//l Уt;
function boom(l,t) {
//div
var oParentNode = document.createElement("div");
//z-index
oParentNode.style.zIndex = z;
z--;
box.appendChild(oParentNode);
var x = l,y = t;
for(var i = 0; i < y;i++){if(!aud.paused){
for(var j = 0;j<x;j++){
//
var oDiv = document.createElement("div");
//
oDiv.style.background = "url("+imgs+")";
oDiv.style.width = box.clientWidth / x + 'px';
oDiv.style.height = box.clientHeight / y + 'px';
oDiv.style.left = (box.clientWidth / x) * j +'px';
oDiv.style.top = (box.clientHeight / y) * i +'px';
oDiv.style.backgroundPositionX = (box.clientWidth/ x)* -j + 'px';
oDiv.style.backgroundPositionY= (box.clientHeight/y)* -i + 'px';
oDiv.style.transition = (Math.random()*1+0.25)+"s";
oParentNode.appendChild(oDiv);
}
}
};
var allDiv = oParentNode.children;
setTimeout(()=>{
index++;
index == imgs.length && (index = 0);
boom(l,t);
for(var i= 0;i<allDiv.length;i++){if(!aud.paused){
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;
};}
},2000);
setTimeout(function(){
oParentNode.remove();
},3500)
}
let fs= true;
box.onclick = () => {
if (fs) {aud.pause();
} else {aud.play();
}
fs = !fs;
};
</script> 漂亮，图片轮播后自动碎裂呢。
欣赏亚伦老师好帖{:4_187:} 自然、顺畅的艺术效果，谢谢亚伦老师精彩分享{:4_190:} 欣赏佳作，问候亚伦。 <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})`;
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})`;
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>
页:
[1]