鸟语

马黑黑 · 发表于 2022-7-29 07:39

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-7-29 07:40 编辑

马黑黑 · 发表于 2022-7-29 07:44

帖子代码：

<style>
#papa { left: -214px; width: 1024px; height: 768px; background: silver url('背景图片url') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; position: relative; }
#wrapper { position: absolute; width: 200px; height: 200px; left: 35%; top: 30%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); cursor: pointer; }
#wrapper::before { position: absolute; content: ''; width: 80px; height: 80px; top: 50%; left: 30%; background: linear-gradient(green, red); border-radius: 50% 50% 25% 50%; transform: rotate(45deg); opacity: .65; }
#mypic { position: absolute; width: 73px; height: 83px; left: 45%; top: 40%; transform: translateZ(80px); transition: left 1.5s,top 1.5s; }
#wrapper>span:nth-child(1) { transform: translateZ(100px); background: mediumturquoise; }
#wrapper>span:nth-child(2) { transform: translateZ(-100px); background: lightgreen; }
#wrapper>span:nth-child(3) { transform: translateX(-100px) rotateY(90deg); background: skyblue; }
#wrapper>span:nth-child(4) { transform: translateX(100px) rotateY(90deg); background: cornflowerblue; }
#wrapper>span:nth-child(5) { transform: translateY(-100px) rotateX(90deg); background: royalblue; }
#wrapper>span:nth-child(6) { transform: translateY(100px) rotateX(90deg); background: lightskyblue; }
.panel { position: absolute; width: 200px; height: 200px; text-align: center; transition: all 4s; }
</style>
<div id="papa">
<div id="wrapper">
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<img id="mypic" src="小鸟图片url" alt="" />
</div>
</div>
<script>
let aud = new Audio();
let lastX = 0, canMove = false;
let panelAr = document.querySelectorAll('.panel');
aud.loop = true;
aud.src = '音乐地址';
wrapper.onclick = () => {
canMove = !canMove;
if(canMove) {
for(ele of panelAr) ele.style.opacity = '0';
wrapper.style.transform = 'rotateX(0) rotateY(0)';
aud.play();
} else {
for(ele of panelAr) ele.style.opacity = '1';
wrapper.style.transform = 'rotateX(-20deg) rotateY(-20deg)';
mypic.style.left = '45%';
mypic.style.top = '40%';
mypic.style.transform = mypic.offsetLeft > 0 ? 'rotateY(0deg)' : 'rotateY(180deg)';
aud.pause();
}
}
document.addEventListener('click', (e) => {
if(canMove == false) return false;
e = event || window.event;
let x = e.pageX, y = e.pageY,
w = document.body.clientWidth, h = document.body.clientHeight,
bw = mypic.offsetWidth, bh = mypic.offsetHeight;
x = x - calcOffset(wrapper).x;
y = y - calcOffset(wrapper).y;
if(x + bw >= w) x = w - bw;
if(y + bh >= h) y = h - bh;
mypic.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
lastX = x;
mypic.style.left = x + 'px';
mypic.style.top = y + 'px';
});
let calcOffset = (ele) => {
let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x, y};
}
</script>