论坛 › 欢乐水吧 › 纯欲风：《叹》

马黑黑 发表于 2022-7-2 19:46

纯欲风：《叹》

<style>
.papa { left: -342px; width: 1280px; height: 720px; background: silver; perspective: 1000px; box-shadow: 4px 4px 28px rgba(0,0,0,.85); position: relative; }
.papa>img {position: absolute; width: 256px; box-shadow: inherit; transform-style: preserve-3d; }
.papa>span { width: 50%; height: 50%; transition: all 1s linear; transform-style: preserve-3d; position: absolute; }
.papa>span:hover { box-shadow: 2px 2px 40px rgba(0,0,0,.95); cursor: pointer; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
.playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0%</span>
                </p>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1901049671.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script language='javascript'>

let papa = document.querySelector('.papa'),
slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let flag = 1, slip = 0, idxar = [];
let imgAr = [ 'hl1.jpg', 'hl2.jpg', 'hl3.jpg', 'hl4.jpg', 'hl5.jpg', 'hl6.jpg' ];
let lrcAr = [
        ['0.00',' 作词 : 夏飞/代诗琪 Tricy'],
        ['1.00',' 作曲 : Phong Max'],
        ['2.00',' 编曲 : PHONG MAX'],
        ['3.00',' 制作人 : PHONG MAX'],
        ['10.00','歌手：黄龄 & Tăng Duy Tan'],
        ['21.01','极暗之处燃起了火'],
        ['24.10','点亮黑夜最深的角落'],
        ['29.03','指尖划过我的脉搏'],
        ['33.04','酝酿一场密谋的风波'],
        ['39.03','男：花瓣飘落 像云下之音'],
        ['42.09','挑战我的神经 试我的清醒'],
        ['47.04','甘霖初落 已交织融合'],
        ['51.07','我们贪恋着 无罪的邪恶'],
        ['56.02','隐约的呢喃 弥漫巫山'],
        ['60.07','女：如梦似幻 浮在云端'],
        ['64.10','男：云雨的纠缠 即刻贪欢'],
        ['69.03','女：梦之彼岸 坠入泥潭'],
        ['74.03','男：承认孤单 清醒作伴'],
        ['82.03','不再孤单 与我作伴'],
        ['91.01','女：遗忘遗忘都遗忘，随我的节奏摇荡'],
        ['99.07','摇晃摇晃再摇晃，若隐若现的微光'],
        ['108.05','一样一样都一样，所有凡相皆迷惘'],
        ['116.08','欲望丰满了皮囊，在梦的边缘逃亡'],
        ['143.00','男：花瓣飘落 像云下之音'],
        ['147.00','挑战我的神经 试我的清醒'],
        ['151.03','甘霖初落 已交织融合'],
        ['155.05','我们贪恋着 无罪的邪恶'],
        ['160.00','隐约的呢喃 弥漫巫山'],
        ['164.03','女：如梦似幻 浮在云端'],
        ['168.07','男：云雨的纠缠 即刻贪欢'],
        ['173.01','女：梦之彼岸 坠入泥潭'],
        ['177.07','男：承认孤单 清醒作伴'],
        ['186.02','不再孤单 与我作伴'],
        ['194.07','女：遗忘遗忘都遗忘，随我的节奏摇荡'],
        ['203.03','摇晃摇晃再摇晃，若隐若现的微光'],
        ['212.00','一样一样都一样，所有凡相皆迷惘'],
        ['220.09','欲望丰满了皮囊，在梦的边缘逃亡']
];
let gnum = (min,max) => Math.floor(Math.random()*(max-min+1))+min;

Array.from({length:32}).forEach((item,key) => idxar.push(key));

imgAr.forEach((item,key) => {
        item = document.createElement('img');
        item.src = 'https://638183.freep.cn/638183/t22/hl/' + imgAr;
        item.style.left = key * 190 + 50 + 'px';
        item.style.top = gnum(40, 300) + 'px';
        item.style.transform = 'rotateY(' + gnum(5,45) +'deg)';
        item.alt = '';
        papa.appendChild(item);
});

for(j=0; j<4; j++) {
        for(k=0; k < 8; k++) {
                let span = document.createElement('span');
                span.style.background = 'url("https://638183.freep.cn/638183/t22/hl/tan.jpg") -' + (k*160) + 'px -' + (j*180) + 'px' ;
                span.style.left = k*160 + 'px';
                span.style.top = j*180 + 'px';
                span.style.width = '160px';
                span.style.height ='180px';
                span.className = 'masks';
                papa.appendChild(span);
        }
}
let masks = document.querySelectorAll('.masks');

setTimeout(() => disappear(), 6000);

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}

function disappear() {
        let idx = gnum(0,idxar.length - 1);
        masks].style.opacity = (flag == 1 ? '0' : '1');
        if(flag == 1) {
                masks].style.transform = 'rotateY(45deg) rotateZ(15deg)';
                masks].style.opacity = '0';
        } else {
                masks].style.transform = 'rotateY(0deg) rotateZ(0deg)';
                masks].style.opacity = '1';
        }
        idxar.splice(idx, 1);
        if(idxar.length == 0) {
                Array.from({length:32}).forEach((item,key) => idxar.push(key));
                flag = -flag;
        }
        setTimeout(() => disappear(), 2000);
}
</script>

马黑黑 发表于 2022-7-2 19:50

黄龄与越南歌手 Tăng Duy Tan 合作的作品，黄龄因此歌红（人不红），Tăng Duy Tan也因此曲步入中国歌迷的视线

醉美水芙蓉 发表于 2022-7-2 20:20

红影 发表于 2022-7-2 20:48

这个竟然分了这么多块{:4_173:}
好像每个小块鼠标划过后就会消失。还以为和前面那个一样，鼠标划过还需要点一下，原来是自动，不需要点呢。

红影 发表于 2022-7-2 20:52

呀，这个不是在CSS里写的啊，原来是在JS里运作的。还以为像前面那种4块的写法，那要写好多个了{:4_173:}

红影 发表于 2022-7-2 20:54

这个好像不需要点的，而是随时间变化的，虽然点上去小图也会随鼠标有变化。

红影 发表于 2022-7-2 20:56

前面看到你那种四块的，我在本地弄了个九块的都觉得好多，你这个32块了吧，刚进帖子吓一跳，这么多{:4_173:}

马黑黑 发表于 2022-7-2 21:20

红影 发表于 2022-7-2 20:48
这个竟然分了这么多块
好像每个小块鼠标划过后就会消失。还以为和前面那个一样，鼠标划过还需要 ...

鼠标响应也有，但无需鼠标操作

马黑黑 发表于 2022-7-2 21:22

醉美水芙蓉 发表于 2022-7-2 20:20
这个太难了！欣赏欣赏吧！谢谢黑黑老师分享！

JS都是封装好的，如果需要改动，需要看懂代码。比方说，要修改切分的块数，就要改几个地方（包括图片尺寸，要计算在内），不然无法衔接。如果不需要改动，那套用就好。

马黑黑 发表于 2022-7-2 21:25

红影 发表于 2022-7-2 20:52
呀，这个不是在CSS里写的啊，原来是在JS里运作的。还以为像前面那种4块的写法，那要写好多个了

传统的CSS写法会累死人，还不好调整。所以用JS生成小块，以及背后的图群。

现在CSS也有编程工具，但运行需要插件，所以不推荐给大家，还是老老实实：数量少的直接用CSS写，数量多了用JS完成。

加林森 发表于 2022-7-2 21:26

哇噻，老黑要把我们整晕了。。。。{:4_170:}

马黑黑 发表于 2022-7-2 21:27

红影 发表于 2022-7-2 20:56
前面看到你那种四块的，我在本地弄了个九块的都觉得好多，你这个32块了吧，刚进帖子吓一跳，这么多{:4_173: ...

还可以弄更多。以前试着弄个3d皮球，几千个小块，不动是就很吃紧了，加载有延时感，动的话，得，上个卫生间回来再看吧，能转了，但是那么卡

马黑黑 发表于 2022-7-2 21:28

加林森 发表于 2022-7-2 21:26
哇噻，老黑要把我们整晕了。。。。

嗯，看久了会有点晕{:4_170:}

加林森 发表于 2022-7-2 21:30

马黑黑 发表于 2022-7-2 21:28
嗯，看久了会有点晕

花椒太麻了。。。。。{:4_189:}

马黑黑 发表于 2022-7-2 21:31

加林森 发表于 2022-7-2 21:30
花椒太麻了。。。。。

舌头还好使吧

加林森 发表于 2022-7-2 21:31

马黑黑 发表于 2022-7-2 21:31
舌头还好使吧

你感觉呢？

马黑黑 发表于 2022-7-2 21:32

加林森 发表于 2022-7-2 21:31
你感觉呢？

我对麻辣烫天生喜欢

加林森 发表于 2022-7-2 21:33

马黑黑 发表于 2022-7-2 21:32
我对麻辣烫天生喜欢

挺好的。

马黑黑 发表于 2022-7-2 21:34

加林森 发表于 2022-7-2 21:33
挺好的。

四川人嘛

加林森 发表于 2022-7-2 21:39

马黑黑 发表于 2022-7-2 21:34
四川人嘛

必须的。

查看完整版本: 纯欲风：《叹》