论坛 › 音乐沙龙 › 夏商周

马黑黑 发表于 2022-7-6 13:32

夏商周

<style>
#papa { left: -202px; padding: 0; width: 1000px; height: 600px; background: #eee url('https://638183.freep.cn/638183/Pic/38/dj.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; border-radius: 6px; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 10px; top: 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; }
#stage { position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); width: 400px; height: 400px; padding: 0; margin: 0; }
#stage::before { position: absolute; content: ''; left: -5px; top: -5px; bottom: -5px; right: -5px; box-shadow: 2px 2px 12px #000; transform: rotate(45deg); }
.piece {
        position: absolute;
        padding: 0;
        margin: 0;
        border:1px solid transparent;
}

@keyframes in {
        80% { transform: scale(1) rotate(0); opacity: 1; }
        100% { transform: scale(0) rotate(-360deg); opacity: 0; }
}
@keyframes out {
        85% { transform: scale(1) rotate(0); opacity: 1; }
        100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

</style>

<div id="papa">
        <div id="stage"></div>
        <div id="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=1956286908.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let picAr = [
        'https://638183.freep.cn/638183/Pic/38/dj1.jpg',
        'https://638183.freep.cn/638183/Pic/38/dj2.jpg',
        'https://638183.freep.cn/638183/Pic/38/dj3.jpg',
        'https://638183.freep.cn/638183/Pic/38/dj4.jpg',
        'https://638183.freep.cn/638183/Pic/38/mx.jpg',
        'https://638183.freep.cn/638183/Pic/38/bs.jpg'
];
let lrcAr = [
        ['0.00','曲名: 夏商周 - 纯音乐'],
        ['20.00','作曲 / 演奏: 阿S罗'],
        ['60.00','读史明智 听歌静心'],
        ['170.00','感谢欣赏']
];
let ww = stage.clientWidth,
        hh = stage.clientHeight;
let piecesX = 5,
        piecesY = 5,
        flag = 1,
        idx = 0,
        slip = 0;
let pw = ww / piecesX;
let ph = hh / piecesY;
let bgar = new Array;

        for(j=0; j<piecesY; j++) {
                for(k=0; k<piecesX; k++) {
                        let piece = document.createElement('span');
                        piece.className = 'piece';
                        piece.style.width = pw + 'px'
                        piece.style.height = ph + 'px';
                        piece.style.left = k * pw + 'px';
                        piece.style.top = j * ph + 'px';
                        bgar.push(k * pw + '|' + j * ph); //记录背景数据
                        stage.appendChild(piece);
                }
        }


let pieces = document.querySelectorAll('.piece');

function out_in() {
        pieces.forEach((ele,key) => {
                let ar = bgar.split('|');
                ele.style.background = 'url(' + picAr + ') -' + ar+ 'px' + ' -' + ar + 'px no-repeat';
                flag == 1 ? (ele.style.animation = 'out 8s 1s', flag = 0) : (ele.style.animation = 'in 8s 1s', flag = 1);
        });
        idx ++;
        if(idx > picAr.length - 1) idx = 0;
        setTimeout(out_in,9000);
}

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

out_in();

</script>

红影 发表于 2022-7-6 14:42

这个漂亮，一个个美女出来后，再用css精灵收回到历史长河去了{:4_204:}

红影 发表于 2022-7-6 14:45

这个背景选得好，背景上用个菱形的透明效果也很有创意。欣赏黑黑好帖{:4_199:}

绿叶清舟 发表于 2022-7-6 17:07

咋就光惦记着那时的美女了

梦油 发表于 2022-7-6 18:06

千变万化的美女图片设计的真妙！黑黑先生见真功夫啊！

马黑黑 发表于 2022-7-6 18:10

梦油 发表于 2022-7-6 18:06
千变万化的美女图片设计的真妙！黑黑先生见真功夫啊！

谢谢夸奖

马黑黑 发表于 2022-7-6 18:12

红影 发表于 2022-7-6 14:42
这个漂亮，一个个美女出来后，再用css精灵收回到历史长河去了

这也瞧得出来了。实际上，镁铝的出场也是唯一通过CSS精灵的

马黑黑 发表于 2022-7-6 18:12

绿叶清舟 发表于 2022-7-6 17:07
咋就光惦记着那时的美女了

不是有几个当代镁铝吗

马黑黑 发表于 2022-7-6 18:13

红影 发表于 2022-7-6 14:45
这个背景选得好，背景上用个菱形的透明效果也很有创意。欣赏黑黑好帖

感觉吧，只有图片轮番出现太突兀

绿叶清舟 发表于 2022-7-6 20:30

马黑黑 发表于 2022-7-6 18:12
不是有几个当代镁铝吗

反正都是美女

红影 发表于 2022-7-6 20:41

马黑黑 发表于 2022-7-6 18:12
这也瞧得出来了。实际上，镁铝的出场也是唯一通过CSS精灵的

这个帖子很灵动，漂亮{:4_187:}

红影 发表于 2022-7-6 20:41

马黑黑 发表于 2022-7-6 18:13
感觉吧，只有图片轮番出现太突兀

嗯，这个菱形背景特别好看{:4_199:}

马黑黑 发表于 2022-7-6 20:46

红影 发表于 2022-7-6 20:41
这个帖子很灵动，漂亮

觉得还行

马黑黑 发表于 2022-7-6 20:48

红影 发表于 2022-7-6 20:41
嗯，这个菱形背景特别好看

这是 .stage 选择器的伪元素，尺寸比父元素 .stage 大一些，然后rotate 45deg，背景不设置就相当于完全透明，用 box-shadow 表示一下它的存在

马黑黑 发表于 2022-7-6 20:51

绿叶清舟 发表于 2022-7-6 20:30
反正都是美女

差不多

四海八荒 发表于 2022-7-6 21:05

绿叶清舟 发表于 2022-7-6 20:30
反正都是美女

妹喜，褒姒，妲己。是不是这仨？

小辣椒 发表于 2022-7-6 21:48

黑黑，又一个新的，咋脑子动这么快，分分钟出来一个{:4_178:}

马黑黑 发表于 2022-7-6 21:49

小辣椒 发表于 2022-7-6 21:48
黑黑，又一个新的，咋脑子动这么快，分分钟出来一个

{:4_170:}

小辣椒 发表于 2022-7-6 21:52

美女好像人人喜欢玩，看见那些纯美女做帖的，主要不用PS，老头每个图图都PS过就会出来一种特别的欣赏效果，。明天我也是去找美女图图去，{:4_173:}

小辣椒 发表于 2022-7-6 21:53

这个音乐也是震撼的和图图相符，黑黑好制作{:4_178:}

查看完整版本: 夏商周