宁静 发表于 2022-10-3 21:19

暗香 TO：苍野 节日快乐！


<style>
        #papa { left: -210px; width: 1280px; height: 704px; top: 150px;background: #ccc url('https://pic1.imgdb.cn/item/6335807f16f2c2beb16ffaa6.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
        #mplayer { position: absolute;top: 600px;left: 900px; width: 200px; height: 70px; display: grid; place-items: center; cursor: pointer; }
        #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
        #mplayer:hover #btnwrap { background: linear-gradient(to top right, rgba(200,0,0,.75), rgba(0,255,20,.45)); border-radius: 50%; opacity: 1; }
        #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
        #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
        #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
        #prog { --yy: 20px; width: 200px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,255,20,.45), rgba(255,0,0,.5) 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; }
        #lrc { position: absolute; top: 110px; font: bold 2.6em sans-serif; color: rgba(0,100,20,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 5s; --state: running; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(0,255,20,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
        #tree { position: absolute; left: 550; width: 200px; height: 280px; top: 320px; mix-blend-mode: multiply; }
        #bird { position: absolute; width: 100px; height: 100px; background: transparent url('https://pic1.imgdb.cn/item/6335809a16f2c2beb170113d.gif') no-repeat; }
        #bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; bottom:-140%; filter: blur(1px); transform:scaleY(-1); }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="papa">
        <img id="tree" src="https://pic1.imgdb.cn/item/62f71a7416f2c2beb19a754f.gif" alt="" />
        <div id="bird"></div>
        <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
        <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
        </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
aud.src = 'https://music.163.com/song/media/outer/url?id=407007146.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.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', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, rgba(0,255,20,.45), rgba(255,0,0,.5) ' + aud.currentTime / aud.duration * 100 + '%, rgba(255,255,255,.35) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
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 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>
<br><br><br><br><br><br><br><br><br><br>

宁静 发表于 2022-10-3 21:20

@苍野
祝美女国庆节快乐！{:10_402:}

苍野 发表于 2022-10-4 16:28

谢谢宁静，节日快乐{:10_412:}

苍野 发表于 2022-10-4 16:29

有的惊喜，仔细再看，确定是自己的礼物{:12_689:}

宁静 发表于 2022-10-4 16:54

苍野 发表于 2022-10-4 16:28
谢谢宁静，节日快乐

苍野节日快乐{:10_402:}

苏三月 发表于 2022-10-6 20:13

好听的《暗香》{:10_402:}

苏三月 发表于 2022-10-6 20:14

问好苍野，收礼开心{:10_402:}
页: [1]
查看完整版本: 暗香 TO：苍野 节日快乐！