鸟语
本帖最后由 马黑黑 于 2022-7-29 07:40 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 768px; background: silver url('https://638183.freep.cn/638183/t22/lake.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=1354790814.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>
帖子代码：
<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>
播放音乐和放出小鸟的动作是一样的：单击3d盒子。
单击气球所指向的原盒子所在区域，或单击小鸟，音乐暂停，小鸟回窝。 马黑黑 发表于 2022-7-29 07:46
播放音乐和放出小鸟的动作是一样的：单击3d盒子。
单击气球所指向的原盒子所在区域，或单击小鸟，音乐暂 ...
那方框能用鸟窝图片替代吗？ 很可爱的动画{:4_199:} 本帖最后由 加林森 于 2022-7-29 10:05 编辑 <br /><br />我帮你把复制的代码删了，不然大家都看不到老黑的效果。 复制了一下，点不出小鸟{:5_106:} 我说怎么了？原来友昕在同层也复制了一个出来，这样不行的。{:4_203:} 辛苦老黑了。 这个有趣，可以用代码放出和关起鸟儿。放出的小鸟那么活泼，还会跟着鼠标跑呢{:4_187:} 红影 发表于 2022-7-29 10:41
这个有趣，可以用代码放出和关起鸟儿。放出的小鸟那么活泼，还会跟着鼠标跑呢
小鸟四处跑是之前的代码实现的，现在的关键是放和收 上海朝阳 发表于 2022-7-29 08:26
那方框能用鸟窝图片替代吗？
可以，但是天热、鸟窝容易着火，还是这个好，自带空调的 友昕 发表于 2022-7-29 09:17
很可爱的动画
可惜不是你播放的小麻雀，俺跟他们不熟 友昕 发表于 2022-7-29 09:21
本帖最后由 加林森 于 2022-7-29 10:05 编辑 我帮你把复制的代码删了，不然大家都看不到老黑的效果。
谢谢
加林森 发表于 2022-7-29 09:30
我说怎么了？原来友昕在同层也复制了一个出来，这样不行的。
我这是用了 id 标识，唯一的，后面再有就非法，整个页面乱套 友昕 发表于 2022-7-29 09:22
复制了一下，点不出小鸟
嗯嗯，通过JS控制的内容，不宜在一页里有多份 马黑黑 发表于 2022-7-29 12:15
我这是用了 id 标识，唯一的，后面再有就非法，整个页面乱套
就是，所以我就帮着把他发的删除了。 马黑黑 发表于 2022-7-29 12:15
谢谢
我看你把帖子代码贴出来，以为可以复制套用，原来还是自己专用呀{:5_106:} 友昕 发表于 2022-7-29 12:26
我看你把帖子代码贴出来，以为可以复制套用，原来还是自己专用呀
套到别的地方是可以的，比如做一个新的帖子。在同一个页面里再使用不行，有冲突 加林森 发表于 2022-7-29 12:21
就是，所以我就帮着把他发的删除了。
辛苦了