红影 发表于 2022-7-31 23:48

悟空（学习黑黑拆装效果）


<style>
#papa { left: -302px; 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: 300px; height: 300px; 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: .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>
        <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;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
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 = 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 = '碎');
        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-31 23:49

作词 : 戴荃
作曲 : 戴荃
月溅星河
长路漫漫
风烟残尽
独影阑珊
谁叫我身手不凡
谁让我爱恨两难
到后来
肝肠寸断
幻世当空
恩怨休怀
舍悟离迷
六尘不改
且怒且悲且狂哉
是人是鬼是妖怪
不过是
心有魔债
叫一声佛祖
回头无岸
跪一人为师
生死无关
善恶浮世真假界
尘缘散聚不分明
难断
我要
这铁棒有何用
我有
这变化又如何
还是不安
还是氐惆
金箍当头
欲说还休
我要
这铁棒醉舞魔
我有
这变化乱迷浊
踏碎灵霄
放肆桀骜
世恶道险
终究难逃
这一棒
叫你灰飞烟灭

马黑黑 发表于 2022-7-31 23:57

本帖最后由 马黑黑 于 2022-8-1 07:36 编辑

步骤一：先将图片写入数组 picAr，放在面板数组 let panelAr 的上方，

letpicAr = [
    '图片1',
    '图片2',
    '图片3',
    '图片4',
    '图片5',
    '图片6',
];

步骤二：在写入魔方的代码处加入如下红色句子，用意是给面板添加背景图片，
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);
});

步骤三：在 mkBox() 函数那里，将红色的语句删除掉，用意是不用给面板着色：

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;
      }
}

这样，叫前面的去随机数函数似乎也用不到了，确定后可以也应当将它删掉：

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

以上是用图片做魔方各面板背景的思路。另一个思路是改 span 标签为 img 标签，这里先不多说。

加林森 发表于 2022-7-31 23:59

厉害厉害，我喜欢！红影真厉害。

浣溪沙 发表于 2022-8-1 06:23

用图图诠释一首歌，真的很恰切{:4_208:}

樵歌 发表于 2022-8-1 07:05

可惜的大师兄，又被 红影大师给困在方寸之中了{:4_173:}

梦油 发表于 2022-8-1 09:21

四四方方的八卦炉。{:4_189:}
红影朋友节日快乐！

四海八荒 发表于 2022-8-1 14:14

来悟空{:5_161:}

红影 发表于 2022-8-1 16:34

马黑黑 发表于 2022-7-31 23:57
步骤一：先将图片写入数组 picAr，放在面板数组 let panelAr 的上方，

letpicAr = [


谢谢黑黑，我本来想用一张带栅栏的图图去封大圣，发现也有点乱，就还是用这样的变色背景了{:4_173:}

红影 发表于 2022-8-1 16:34

加林森 发表于 2022-7-31 23:59
厉害厉害，我喜欢！红影真厉害。

孙大圣跳不出如来佛祖的手掌心{:4_173:}

红影 发表于 2022-8-1 16:36

马黑黑 发表于 2022-7-31 23:57
步骤一：先将图片写入数组 picAr，放在面板数组 let panelAr 的上方，

letpicAr = [


这个要是做得仔细点，还可以让如来佛祖手打出一道光，记得你以前就教过怎样弄出转动的光。{:4_173:}

红影 发表于 2022-8-1 16:38

浣溪沙 发表于 2022-8-1 06:23
用图图诠释一首歌，真的很恰切

其实看到黑黑的拆封效果的代码，首先就想到了孙悟空斗不过如来的事{:4_173:}

红影 发表于 2022-8-1 16:40

樵歌 发表于 2022-8-1 07:05
可惜的大师兄，又被 红影大师给困在方寸之中了

我哪有那本事，孙猴子都不用动用金箍棒就能把我打得灰飞烟灭了{:4_173:}

加林森 发表于 2022-8-1 16:41

红影 发表于 2022-8-1 16:34
孙大圣跳不出如来佛祖的手掌心

当然了。

红影 发表于 2022-8-1 16:41

梦油 发表于 2022-8-1 09:21
四四方方的八卦炉。
红影朋友节日快乐！

哈哈，这个应该不是八卦炉，反正也是种封印{:4_173:}

红影 发表于 2022-8-1 16:42

四海八荒 发表于 2022-8-1 14:14
来悟空

悟空在忙着破除封印呢{:4_173:}

马黑黑 发表于 2022-8-1 18:10

红影 发表于 2022-8-1 16:36
这个要是做得仔细点，还可以让如来佛祖手打出一道光，记得你以前就教过怎样弄出转动的光。

那去弄弄

马黑黑 发表于 2022-8-1 18:10

红影 发表于 2022-8-1 16:34
谢谢黑黑，我本来想用一张带栅栏的图图去封大圣，发现也有点乱，就还是用这样的变色背景了

图片是要整理一下的

梦油 发表于 2022-8-1 18:31

红影 发表于 2022-8-1 16:41
哈哈，这个应该不是八卦炉，反正也是种封印

反正你把那猴头弄进去了{:4_189:}

千羽 发表于 2022-8-1 20:02

影儿好技艺，作业完成的{:4_187:}太棒了
页: [1] 2 3 4
查看完整版本: 悟空（学习黑黑拆装效果）