《I Love You (Original Mix)》- Various Artists（学习老黑‘鸟语’制作）
<style>
#papa { left: -214px; width: 1024px; height: 768px; background: silver url('https://pic.imgdb.cn/item/62ddfc49f54cd3f93712d17a.jpg') 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="/data/attachment/forum/202207/17/112951jm0vqgv98w8z3h3z.gif" alt="" />
</div>
</div>
<script>
let aud = new Audio();
let lastX = 0, canMove = false;
let panelAr = document.querySelectorAll('.panel');
aud.loop = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=408532087.mp3';
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>
@马黑黑 小鸟来回跑，挺有意思的。 梦油 发表于 2022-7-29 10:39
小鸟来回跑，挺有意思的。
好玩吧。{:4_189:} 队长学得真快，这小鸟儿从这么美丽的地方放出来，更增添了环境的美好{:4_187:} 红影 发表于 2022-7-29 10:53
队长学得真快，这小鸟儿从这么美丽的地方放出来，更增添了环境的美好
红影学习完了吧。现在又可以玩了哈。 真正的绿水青山 马黑黑 发表于 2022-7-29 12:09
真正的绿水青山
是啊，这样挺好看的。 加林森 发表于 2022-7-29 12:23
是啊，这样挺好看的。
完美 加林森 发表于 2022-7-29 10:41
好玩吧。
好！很有生气。 马黑黑 发表于 2022-7-29 12:52
完美
嗯嗯，是的。 梦油 发表于 2022-7-29 13:14
好！很有生气。
挺好的。 马黑黑 发表于 2022-7-29 12:09
真正的绿水青山
是的。 加林森 发表于 2022-7-29 13:16
挺好的。
老林真是有两下子{:4_199:} 梦油 发表于 2022-7-29 13:34
老林真是有两下子
跟到学的，就是有点小创新。 加林森 发表于 2022-7-29 13:35
跟到学的，就是有点小创新。
你的脑子是挺灵活的。 梦油 发表于 2022-7-29 13:49
你的脑子是挺灵活的。
{:4_170:} 加林森 发表于 2022-7-29 13:19
是的。
非常好呢 马黑黑 发表于 2022-7-29 18:18
非常好呢
谢谢老黑！{:4_190:} 加林森 发表于 2022-7-29 18:31
谢谢老黑！
{:4_180:}
页:
[1]
2