论坛 › 欢乐水吧 › 人生为啥这么苦-郭力（DJ 默涵版）

醉美水芙蓉 发表于 2022-11-12 08:33

人生为啥这么苦-郭力（DJ 默涵版）

本帖最后由 醉美水芙蓉 于 2022-11-12 14:44 编辑 <br /><br /><style>
#papa { margin: 120px 0 0 calc(50% - 581px); width: 1000px; height: 600px; background: gray url('https://pic1.imgdb.cn/item/636f417516f2c2beb1a3e30c.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; perspective: 1000px; position: relative; z-index: 1; }
#papa > span { position: absolute; left: -240px; width: 100%; height: 100%; font: bold 1em serif; display: grid; place-items: center; }
#mplayer { position: absolute; bottom: 10px; grid-template-columns: auto auto auto; gap: 6px; display: grid; place-items: center; font: normal 16px sans-serif; color: snow; z-index: 999; }
#btnplay { margin-right: -4px; width: 30px; height: 30px; font: bold 30px/30px serif; text-align: center; color: blue; cursor: pointer; animation: rot 4s infinite linear; animation-play-state: var(--state); --state: paused; }
#prog { width: 200px; height: 20px; cursor: pointer; }
#lrc { position: absolute; top: 10px; font: bold 3em sans-serif; color: transparent; background: linear-gradient(180deg, hsla(60, 100%, 50%, .65), hsla(120, 80%, 40%, .75)); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(30, 100%, 70%, .95)); z-index: 1000; }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="papa">
        <div id="mama"></div>
        <div id="lrc">花潮论坛lrc在线</div>
        <div id="mplayer">
                <span id="btnplay">۞</span>
                <progress id="prog" max="100"></progress>
                <span id="tmsg">00:00 | 00:00</span>
        </div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=247518636&.mp3" loop autoplay></audio>

<script>
(function() {
        (function() {
                let total = 65, rr = 200;
                Array.from({length: total}).forEach((item,key) => {
                        item = document.createElement('span');
                        item.innerText = String.fromCharCode(43072 + Math.floor(Math.random() * 65));
                        item.style.cssText += `
                                color: hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.5 + 0.3});
                                font-size: ${Math.ceil(Math.random() * 20) + 20}px;
                                //transform: rotate(${Math.random() * 360}deg) translateY(${rr/total * key}px);
                                transform: rotate(${Math.random() * 180}deg) translateY(${rr/total * key}px);
                        `;
                        papa.appendChild(item);
                });
        })();
        let mKey = 0, mSeek = false, mFlag = true, lap = 0.5;
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - lap >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let showLrc = (time) => {lrc.innerHTML = lrcAr;mKey += 1;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
})();
</script>

梦缘 发表于 2022-11-12 10:16

歌好听，感谢老师的分享！{:4_171:}

醉美水芙蓉 发表于 2022-11-12 10:25

梦缘 发表于 2022-11-12 10:16
歌好听，感谢老师的分享！

老师早上好！谢谢欣赏支持！

小辣椒 发表于 2022-11-12 11:35

欣赏水芙蓉的精彩制作，为什么不用背景图呢

樵歌 发表于 2022-11-12 12:20

欣赏一会。{:4_187:}

东篱闲人 发表于 2022-11-12 12:22

人生就是一场或华丽，或落寞的悲剧。。。。{:5_103:}

醉美水芙蓉 发表于 2022-11-12 12:30

樵歌 发表于 2022-11-12 12:20
欣赏一会。

谢谢樵歌欣赏支持！

醉美水芙蓉 发表于 2022-11-12 12:30

东篱闲人 发表于 2022-11-12 12:22
人生就是一场或华丽，或落寞的悲剧。。。。

谢谢东篱老师点评！

马黑黑 发表于 2022-11-12 12:37

小辣椒 发表于 2022-11-12 11:35
欣赏水芙蓉的精彩制作，为什么不用背景图呢

图片出来慢吧

小辣椒 发表于 2022-11-12 13:34

马黑黑 发表于 2022-11-12 12:37
图片出来慢吧

我看了是http的。黑黑你们这种图片可以看见？http://pan.yinhuabbs.cn/view.php/01c1ce8b84b0ebd7c1be7d4c28515eb3.jpg

马黑黑 发表于 2022-11-12 14:21

小辣椒 发表于 2022-11-12 13:34
我看了是http的。黑黑你们这种图片可以看见？

http 被视为不安全，https 才会被接受。不过如果浏览器很老，是没问题的

醉美水芙蓉 发表于 2022-11-12 14:45

小辣椒 发表于 2022-11-12 11:35
欣赏水芙蓉的精彩制作，为什么不用背景图呢

地址换了，可以看见了！

醉美水芙蓉 发表于 2022-11-12 14:46

樵歌 发表于 2022-11-12 12:20
欣赏一会。

谢谢樵歌欣赏！

醉美水芙蓉 发表于 2022-11-12 14:46

马黑黑 发表于 2022-11-12 12:37
图片出来慢吧

老师图片地址改了！

醉美水芙蓉 发表于 2022-11-12 14:47

东篱闲人 发表于 2022-11-12 12:22
人生就是一场或华丽，或落寞的悲剧。。。。

谢谢东篱老师点评！

千羽 发表于 2022-11-12 14:49

好听的歌儿，我只看见了一条路的背景图，估计是网络又不行了{:4_203:}

醉美水芙蓉 发表于 2022-11-12 14:51

千羽 发表于 2022-11-12 14:49
好听的歌儿，我只看见了一条路的背景图，估计是网络又不行了

是的，只有一条路！没有加人物，不会做图！

马黑黑 发表于 2022-11-12 15:02

醉美水芙蓉 发表于 2022-11-12 14:46
老师图片地址改了！

酱紫好漂亮的

醉美水芙蓉 发表于 2022-11-12 15:06

马黑黑 发表于 2022-11-12 15:02
酱紫好漂亮的

要把那个蒙古字改成会走动的人可能会更好看点！都没有看懂那个字怎么出来的？

马黑黑 发表于 2022-11-12 16:01

醉美水芙蓉 发表于 2022-11-12 15:06
要把那个蒙古字改成会走动的人可能会更好看点！都没有看懂那个字怎么出来的？

Unicode字符

查看完整版本: 人生为啥这么苦-郭力（DJ 默涵版）