《汗、雨、泪》（学习老黑‘ 装拆一念间’制作）
本帖最后由 加林森 于 2022-8-1 21:17 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; display: flex; justify-content: center; background: #000 url('https://pic.imgdb.cn/item/62e47dfbf54cd3f937c1ea68.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; top: calc(50% - 150px); width: 150px; height: 150px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 40%; top: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateZ(100px); background: linear-gradient(tan, red); opacity: .75; }
.panel { position: absolute; width: 300px; height: 300px; opacity: .75; }
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color: silver; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: calc(50% + 35px); bottom: 40px; }
</style>
<div id="papa">
<h2>装拆一念间</h2>
<img (‘https://pic.rmb.bdstatic.com/bjh/dac074d3580fd7c1edf0e9222bb5e871.jpeg/’)></div>
<input id="btnPlay" type="button" value="音乐停" />
<span id="yyMsg">背景音乐 - 汗、雨、泪</span>
<input id="btnBegin" type="button" value="暂停" />
<span id="mkMsg">waiting ...</span>
</div>
<script>
let idx = 0, step = 1, flag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=68362.mp3';
aud.loop = true;
aud.autoplay = true;
lspanAr.splice(1,0,ball);
let panelAr = [
' translateY(150px) rotateX(90deg)', //下
'translateZ(-150px)', //后
'translateZ(150px)', //前
'translateX(-150px) rotateY(90deg)', //左
'translateX(150px) rotateY(90deg)', //右
'translateY(-150px) rotateX(90deg)', //上
];
panelAr.forEach((item,key) => {
let span = document.createElement('span');
span.className = 'panel';
span.style.transform = panelAr;
span.style.display = 'none';
wrapper.appendChild(span);
});
let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);
let TT = setInterval(mkBox, 2000);
btnBegin.onclick = () => {
flag = !flag;
flag ? (TT = setInterval(mkBox, 2000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');
function mkBox() {
step > 0 ? (spanAr.style.display = 'block', mkMsg.innerText = '装') : (spanAr.style.display = 'none', mkMsg.innerText = '拆');
spanAr.style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
idx += step;
if(idx > spanAr.length - 1 || idx < 0) {
step = -step;
idx += step;
}
}
</script>
@马黑黑 队长神速
没分了 马黑黑 发表于 2022-7-30 09:44
队长神速
没分了
没事的。中间能不能换一个呢？ 加林森 发表于 2022-7-30 09:46
没事的。中间能不能换一个呢？
这就看你自己了，研究一下就好，你看亚伦换啥都成 马黑黑 发表于 2022-7-30 09:57
这就看你自己了，研究一下就好，你看亚伦换啥都成
就是，我一直在想换什么呢？ 太厉害了，太会制作了{:4_187:} 浣溪沙 发表于 2022-7-30 10:36
太厉害了，太会制作了
沙沙也玩一个，挺好玩的。 加林森 发表于 2022-7-30 10:09
就是，我一直在想换什么呢？
吃透代码，至少知道关键代码做啥，你就可以更换 马黑黑 发表于 2022-7-30 10:46
吃透代码，至少知道关键代码做啥，你就可以更换
是的。我一直在想呢。 自动拆装啊！ 加林森 发表于 2022-7-30 10:58
是的。我一直在想呢。
看看能不能看出点名堂 三好学生，奖朵小红花{:4_204:} 马黑黑 发表于 2022-7-30 11:02
看看能不能看出点名堂
我感觉关键代码是第三个，就是那个随园型的，我想换成一颗小树。 梦油 发表于 2022-7-30 11:02
自动拆装啊！
是啊。 樵歌 发表于 2022-7-30 11:21
三好学生，奖朵小红花
{:4_172:}{:4_176:} 加林森 发表于 2022-7-30 11:22
我感觉关键代码是第三个，就是那个随园型的，我想换成一颗小树。
我这个代码不是简单的机制，你换一个图片替代 <span id="ball"></span> 语句可以，但在JS中同样要做些处理。 马黑黑 发表于 2022-7-30 12:00
我这个代码不是简单的机制，你换一个图片替代语句可以，但在JS中同样要做些处理。
我就是感觉到了困难了，不知道该如何下手呢。谢谢老黑了。 加林森 发表于 2022-7-30 12:33
我就是感觉到了困难了，不知道该如何下手呢。谢谢老黑了。
整体运作机制要能读得出来才可以按自己的心愿去做，否则就只能简单去套用 马黑黑 发表于 2022-7-30 12:49
整体运作机制要能读得出来才可以按自己的心愿去做，否则就只能简单去套用
是的，我还琢磨呢。
页:
[1]
2