马黑黑 发表于 2022-8-1 18:10
那去弄弄
那要使劲去翻前面的帖子了，还是算了{:4_173:}
马黑黑 发表于 2022-8-1 18:10
图片是要整理一下的
对了，这个如来佛祖就是用你给的那个抠图弄个出来的呢。
换图片上去，这个应该可以弄的，比找那道光容易多了。
梦油 发表于 2022-8-1 18:31
反正你把那猴头弄进去了
嘘，是黑黑的代码把猴哥弄进去的，不是我{:4_173:}
亲爱的，效果太棒了，争取下个星期套用你的做一次{:4_171:}
千羽 发表于 2022-8-1 20:02
影儿好技艺，作业完成的太棒了
这个是代码作业，不是消暑作业{:4_173:}
小辣椒 发表于 2022-8-1 22:01
亲爱的，效果太棒了，争取下个星期套用你的做一次
看到黑黑的那个拆装很有趣，就跟着做了个。期待着亲爱的精彩{:4_187:}
红影 发表于 2022-8-1 22:00
对了，这个如来佛祖就是用你给的那个抠图弄个出来的呢。
换图片上去，这个应该可以弄的，比找那道光容易 ...
是不是呀
红影 发表于 2022-8-1 22:00
嘘，是黑黑的代码把猴哥弄进去的，不是我
哈哈哈……“不是我”……
我在幼儿园里经常听到这三个字
马黑黑 发表于 2022-8-1 23:18
是不是呀
<style>
#papa { left: -304px; width: 1200px; height: 700px; display: flex; justify-content: center; background: #000 url('https://pic.imgdb.cn/item/62e69c948c61dc3b8e221dd6.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; left: 20%;top: calc(50% - 150px); width: 280px; height: 280px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 60px; top: calc(50% - 30px); width: 200px; height: 200px; border-radius: 50%; transform: translateZ(20px);}
.panel { position: absolute; width: 300px; height: 300px; opacity: .55; }
#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>
<div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/62e69c708c61dc3b8e21f3fd.gif" alt="" /></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=33162226.mp3';
aud.loop = true;
aud.autoplay = true;
letpicAr = [
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
'https://pic.imgdb.cn/item/62e7f17116f2c2beb10a0778.jpg',
];
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.background = 'url(' + picAr + ') no-repeat center/cover';
span.style.transform = panelAr;
span.style.display = 'none';
wrapper.appendChild(span);
});
let spanAr = document.querySelectorAll('.panel');
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 = '给我破');
idx += step;
if(idx > spanAr.length - 1 || idx < 0) {
step = -step;
idx += step;
}
}
</script>
马黑黑 发表于 2022-8-1 23:18
是不是呀
你看，这个就是之前要加的图图，貌似还不如直接用变色那个好，感觉有点乱。
马黑黑 发表于 2022-8-1 23:18
是不是呀
这个能不能让封的时候，佛祖手里出现那个光柱，然后破开的时候，光柱就停止？
也就是光柱在拆装时候不是一直出现。
梦油 发表于 2022-8-2 09:24
哈哈哈……“不是我”……
我在幼儿园里经常听到这三个字
哈哈，我不是抵赖，真的是黑黑代码封住了孙大圣{:4_189:}
红影 发表于 2022-8-2 19:22
哈哈，我不是抵赖，真的是黑黑代码封住了孙大圣
你们都是很有才华的人。
红影 发表于 2022-8-2 19:22
这个能不能让封的时候，佛祖手里出现那个光柱，然后破开的时候，光柱就停止？
也就是光柱在拆装时候不是 ...
创意不错
红影 发表于 2022-8-2 19:20
你看，这个就是之前要加的图图，貌似还不如直接用变色那个好，感觉有点乱。
就是要乱的。五指山杂草丛生，才能缠住孙悟空的
红影 发表于 2022-8-1 16:40
我哪有那本事，孙猴子都不用动用金箍棒就能把我打得灰飞烟灭了
大马朮等阵法，趁猴子不注意祭岀来{:4_173:}
梦油 发表于 2022-8-2 19:47
你们都是很有才华的人。
我不行，我都是跟在后面套用的{:4_173:}
马黑黑 发表于 2022-8-2 19:48
创意不错
要做出来不容易的，算了，还是不折腾了{:4_173:}
马黑黑 发表于 2022-8-2 19:50
就是要乱的。五指山杂草丛生，才能缠住孙悟空的
反正不日前面面板那种清爽{:4_173:}
樵歌 发表于 2022-8-2 20:50
大马朮等阵法，趁猴子不注意祭岀来
猴子神通广大，我心念一动，他早就知道了，连玉皇大帝都败了，凡人怎么可能斗得过{:4_173:}