论坛 › 『唯美音画』 › 《梦幻》回致：慕儿

苏三月 发表于 2022-12-21 19:00

《梦幻》回致：慕儿

本帖最后由 苏三月 于 2022-12-21 19:04 编辑 <br /><br />


<style>
#papa {
        margin: 120px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 629px;
        background: gray url('https://pic.imgdb.cn/item/6374c9bd16f2c2beb13f565d.jpg') no-repeat center/cover;
        display: grid;
        place-items: center;
        box-shadow: 3px 3px 20px #000;
        perspective: 1000px;
        overflow: hidden;
        user-select: none;
        position: relative;
        z-index: 1;
}
#mplayer {
        position: absolute;
        bottom: 20px;
        grid-template-columns: auto auto auto;
        gap: 6px;
        display: grid;
        place-items: center;
        color: hsl(0, 100%, 100%);
        font: normal 16px sans-serif;
        z-index: 999;
}
#btnplay {
        --state: paused;
        margin-right: -4px;
        width: 30px;
        height: 30px;
        font: bold 30px/30px serif;
        text-align: center;
        cursor: pointer;
        animation: rot 4s infinite linear;
        animation-play-state: var(--state);
}
#prog {
        width: 200px;
        height: 20px;
        opacity: .95;
        cursor: pointer;
}
.stars {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: silver;
        transform-style: preserve-3d;
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <div id="mplayer">
                <span id="btnplay">✿</span>
                <meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
                <span id="tmsg">00:00 | 00:00</span>
        </div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1894524133.mp3" loop autoplay></audio>

<script>
(function() {
        (function() {
                for(j=0; j<500; j++) {
                        let ele = document.createElement('span');
                        ele.className = 'stars';
                        ele.style.cssText += `
                                left: ${Math.random() * 400 + 450}px;
                                top: ${Math.random() * 80 + 100}px;
                                background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
                                box-shadow: 0 0 5px hsla(0,10%,100%,.25);
                                transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
                                animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
                        `;
                        papa.appendChild(ele);
                }
        })();
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
        prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        }
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => aud.play());
        aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
        });
        let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        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-12-26 09:04

卡位儿，苏苏制作真好看{:10_402:}

蜻蜓 发表于 2022-12-28 13:11

三月学的很棒

慕儿 发表于 2022-12-28 13:35

啊啊啊，我咋才看见啊，啥时候的事。

慕儿 发表于 2022-12-28 13:35

三月做得真漂亮，喜欢喜欢。哈哈

苍野 发表于 2022-12-28 17:02

三月也会制作播放器，厉害

宁静 发表于 2023-1-3 14:21

啊~~~三月你太棒了{:9022:}

宁静 发表于 2023-1-3 14:21

这个播放器会了。太佩服了{:10_402:}

宁静 发表于 2023-1-3 14:22

最近放开了，要多保重，千万做好防护，我中招后，一直恢复不了。。。。。

宁静 发表于 2023-1-3 14:34

刚发现有这个地方可以发了拿勋章

我们都要好好的 TO：苏三月
https://www.dlbbs.com/thread-39719-1-1.html
(出处: 东篱雅苑)

查看完整版本: 《梦幻》回致：慕儿