论坛 › 欢乐水吧 › 爱上飘雪的冬

醉美水芙蓉 发表于 2022-10-31 22:26

爱上飘雪的冬

本帖最后由 醉美水芙蓉 于 2022-11-1 18:14 编辑 <br /><br /><style>
#papa {
        left: -214px;
        width: 1024px;
        height: 640px;
        background: #666 url('https://s1.ax1x.com/2022/10/31/xT3jkF.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa::before { position: absolute; content: ''; width:100%; height: 100%; background: gray url('https://365.tf/disk/tf/1667242630.gif') repeat; mix-blend-mode: screen; }

#mplayer {
        position: absolute;
        display: grid;
        grid-template-areas:
                'cur btnplay dur'
                'prog prog prog';
        gap: 4px;
        place-items: end center;
        font-size: 14px;
        bottom: 20px;
        left: 320px;
}
#cur { grid-area: cur; color: snow; }
#dur { grid-area: dur; color: snow; }
#btnplay {
        grid-area: btnplay;
        display: grid;
        grid-auto-flow: column;
        place-items: end center;
        gap: 0 4px;
        height: 60px;
        cursor: pointer;
}
#btnplay > span {
        background: red;
        width: 4px;
        transition: .6s;
}
#prog {
        --ww: 0px;
        grid-area: prog;
        width: 400px;
        height: 12px;
        border-radius: 6px;
        background: snow;
        opacity: .65;
        cursor: pointer;
        position: relative;
}
#prog::before {
        position: absolute;
        content: '';
        width: var(--ww);
        height: 12px;
        border-radius: 6px;
        background: snow linear-gradient(90deg, green,red);
        opacity: .65;
}
#lrc {
        --motion: cover1;
        --tt: 5s;
        --state: paused;
        position: absolute;
        top: 20px;
        left: 320px;
        font: bold 2.4em sans-serif;
        color: hsl(0, 10%, 90%);
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: nowrap;
        background: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));
        filter: inherit;
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 {
        from { width: 0; }
        to { width: 100%; }
}

@keyframes cover2 {
        from { width: 0; }
        to { width: 100%; }
}
</style>

<div id="papa">
        <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
        <div id="mplayer">
                <div id="cur">00:00</div>
                <div id="btnplay"></div>
                <div id="dur">00:00</div>
                <div id="prog"></div>
        </div>
        <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=247409108&.mp3" loop autoplay></audio>
</div>

<script>
(function() {
        let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        for(j=0; j<20; j++) {
                let pinpu = document.createElement('span');
                pinpu.className = 'pinpu';
                pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
                btnplay.appendChild(pinpu);
        }
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
        prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('timeupdate', () => {
                let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
                prog.style.setProperty('--ww', prg + 'px');
                cur.innerText = toMin(aud.currentTime);
                dur.innerText = toMin(aud.duration);
                setPinpu();
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                                cKey = j;
                                if (mKey === j) showLrc(lrcAr);
                                else continue;
                        }
                }
        });
        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 showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
        };
        let mState = () => lrc.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;
        };
        let setPinpu = ()=> {
                let eles = document.querySelectorAll('.pinpu');
                eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
        };
})();
</script>

红影 发表于 2022-10-31 22:35

漂亮的频谱播放器，雪花动态小了点，满布会不会更好点{:4_187:}

起个网名好难 发表于 2022-10-31 22:37

https://img0.baidu.com/it/u=2832424350,2742548897&fm=253&fmt=auto&app=138&f=GIF?w=499&h=329

小辣椒 发表于 2022-10-31 22:43

水芙蓉速度快的，晚上看见就做出来了{:4_187:}

小辣椒 发表于 2022-10-31 22:44

上次黑黑分享的频谱我加大了，感觉也是漂亮，这次也是想做一次

小辣椒 发表于 2022-10-31 22:45

欣赏水芙蓉的精彩制作，加的小动图也是增加画面灵动感{:4_199:}

马黑黑 发表于 2022-10-31 22:55

这个评分后播放器歌词貌似正常

亦是金 发表于 2022-10-31 23:02

水芙蓉老师的制作速度快，歌曲好听，背景好看.赞一个！{:4_178:}

醉美水芙蓉 发表于 2022-11-1 06:38

红影 发表于 2022-10-31 22:35
漂亮的频谱播放器，雪花动态小了点，满布会不会更好点

没有制作成功！我的想法跟你一样！

醉美水芙蓉 发表于 2022-11-1 06:56

起个网名好难 发表于 2022-10-31 22:37


不成功的制作，雪花没有满屏？

醉美水芙蓉 发表于 2022-11-1 06:57

小辣椒 发表于 2022-10-31 22:45
欣赏水芙蓉的精彩制作，加的小动图也是增加画面灵动感

谢谢小辣椒支持！

醉美水芙蓉 发表于 2022-11-1 06:57

马黑黑 发表于 2022-10-31 22:55
这个评分后播放器歌词貌似正常

谢谢黑黑老师光临指导，可惜没有制作成功，雪花没有满屏！

醉美水芙蓉 发表于 2022-11-1 06:58

亦是金 发表于 2022-10-31 23:02
水芙蓉老师的制作速度快，歌曲好听，背景好看.赞一个！

谢谢老师支持！

马黑黑 发表于 2022-11-1 07:16

醉美水芙蓉 发表于 2022-11-1 06:57
谢谢黑黑老师光临指导，可惜没有制作成功，雪花没有满屏！
你需要更换一种雪花展现方式。这句，


#papa::before { position: absolute; content: url('https://365.tf/disk/tf/1667242630.gif'); transform: translate(40,320px); }

改为，

#papa::before { position: absolute; content: ''; width:100%; height: 100%; background: gray url('https://365.tf/disk/tf/1667242630.gif') repeat; }

如果图片背景透明，则无需加这句 mix-blend-mode: screen; ，非透明背景才用，且，纯白色背景取值是 multiply，纯黑色背景取值 screen 或 difference

相约爱晚亭 发表于 2022-11-1 07:41

欣赏音画佳作！

起个网名好难 发表于 2022-11-1 08:25

本帖最后由 起个网名好难 于 2022-11-1 08:57 编辑

醉美水芙蓉 发表于 2022-11-1 06:56
不成功的制作，雪花没有满屏？
有一个就不愁第二个，试着加个right：0px;
#papa::after { position: absolute; right:0px; content: url('https://365.tf/disk/tf/1667242630.gif'); transform: translate(40,310px); mix-blend-mode: screen; }
或
#papa::before { position: absolute; top:30px; left:30px;content: url('https://365.tf/disk/tf/1667242630.gif'); }
#papa::after{ position: absolute; top:30px; right:30px; content: url('https://365.tf/disk/tf/1667242630.gif'); }

红影 发表于 2022-11-1 14:40

醉美水芙蓉 发表于 2022-11-1 06:38
没有制作成功！我的想法跟你一样！

图片可以平铺的啊。

醉美水芙蓉 发表于 2022-11-1 18:15

马黑黑 发表于 2022-11-1 07:16
你需要更换一种雪花展现方式。这句，




谢谢黑黑老师指导！

醉美水芙蓉 发表于 2022-11-1 18:16

起个网名好难 发表于 2022-11-1 08:25
有一个就不愁第二个，试着加个right：0px;
或

谢谢老师指导！

马黑黑 发表于 2022-11-1 20:08

醉美水芙蓉 发表于 2022-11-1 18:15
谢谢黑黑老师指导！

不客气

查看完整版本: 爱上飘雪的冬