论坛 › 欢乐水吧 › 最后一支舞 to冬小雨（学习黑黑双语歌词同步）

红影 发表于 2022-11-16 21:31

最后一支舞 to冬小雨（学习黑黑双语歌词同步）

<style>
#papa { margin: 120px 0 0 calc(50% - 681px); width: 1200px; height: 675px; display: grid; place-items: center; background: #0b1a3a; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; display: grid; grid-template-areas: 'cur btnplay dur' 'prog prog prog'; gap: 0 4px; place-items: end center; font-size: 14px; left: 860px; bottom: 30px; }
#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: 4px; height: 60px; cursor: pointer; }
#btnplay > span { background: red; width: 4px; transition: .6s; }
#prog { grid-area: prog; width: 260px; height: 20px; opacity: .65; cursor: pointer; position: relative; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 20px; top: 20px; font: bold 2em 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: pre; background: linear-gradient(180deg, hsla(60, 100%, 50%, .45), hsla(0, 70%, 50%, .6), hsla(300, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
.star { --delay: 0s; position: absolute; width: 3px; height: 3px; background: white; transition: all .8s; opacity: .9; animation: flash linear .8s var(--delay) infinite alternate; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes flash { to { opacity: .1; } }
#tu { position: absolute; width: 500px; height: 406px; left:360px; bottom: 120px; mix-blend-mode: screen; opacity: 0.65; border-radius: 80px; }
</style>

<div id="papa">
        <img src="https://pic.imgdb.cn/item/6374bfef16f2c2beb12fcb70.jpg" alt="" style="position: absolute;

right: 0px; top: 0px; animation: flash linear 1.5s infinite alternate;" />
      <img id="tu" src="https://pic.imgdb.cn/item/6374c0f116f2c2beb1316e55.gif" alt="" />
        <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>
                <meter id="prog" max="100" low="25" high="75" optimum="85" value="0"></meter>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=25730799.mp3" loop

autoplay></audio>
</div>

<script>
(function() {
        (function() {let total = 200;let ww = papa.offsetWidth, hh = papa.offsetHeight;Array.from({length: total}).forEach( (ele,k) => {ele = document.createElement('span');ele.className = 'star';ele.style.cssText += `--delay: ${Math.random() * 10}s;left: ${Math.random() * ww}px;top: ${Math.random() * hh}px;box-shadow: ${Math.random() * 100}px ${Math.random() * 50}px 0 white;`;papa.appendChild(ele);});})();
        let mKey = 0, mFlag = true;
        let lrcAr = [
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        (function() {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.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;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 = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/,'\n');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-11-16 21:33

学做一下黑黑的双语歌词同步，顺便用来回冬小雨的礼物了@冬天的雨{:4_187:}

红影 发表于 2022-11-16 21:35

把黑黑的那个《极光》里的小星星都搬来了这个帖子，那颗大星星被我用作底图的闪烁了@马黑黑{:4_173:}

红影 发表于 2022-11-16 21:36

这首歌到后来伴唱和主唱混在一起，听了好几遍才分辨出来，做同步时被折腾够呛{:4_173:}

千羽 发表于 2022-11-16 21:48

这个创意好巧妙，双语同步好精准呢{:4_187:}

千羽 发表于 2022-11-16 21:51

把小星星放这里效果挺好的，这个播放器也是很喜欢{:4_187:}

千羽 发表于 2022-11-16 21:52

帮喊：@{:4_195:}小冬雨快来收礼了{:4_173:}

红影 发表于 2022-11-16 22:07

千羽 发表于 2022-11-16 21:48
这个创意好巧妙，双语同步好精准呢

觉得这首歌挺好听，就按歌词去找底图和动图了，找完往一起一放，就完活了{:4_173:}

红影 发表于 2022-11-16 22:07

千羽 发表于 2022-11-16 21:51
把小星星放这里效果挺好的，这个播放器也是很喜欢

这个背景比较杂，小星星都看不出来了，所以我放大了一点点{:4_173:}

千羽 发表于 2022-11-16 22:08

红影 发表于 2022-11-16 22:07
觉得这首歌挺好听，就按歌词去找底图和动图了，找完往一起一放，就完活了

说起来简单，做起来很不容易的{:4_181:}

红影 发表于 2022-11-16 22:08

千羽 发表于 2022-11-16 21:52
帮喊：@小冬雨快来收礼了

他还不定什么时候上来呢，反正我回完礼了，不管了{:4_173:}

千羽 发表于 2022-11-16 22:08

红影 发表于 2022-11-16 22:07
这个背景比较杂，小星星都看不出来了，所以我放大了一点点

看起来正好的样子{:4_181:}

千羽 发表于 2022-11-16 22:09

红影 发表于 2022-11-16 22:08
他还不定什么时候上来呢，反正我回完礼了，不管了

哈哈，有点神出鬼没的{:4_189:}

红影 发表于 2022-11-16 22:12

千羽 发表于 2022-11-16 22:08
说起来简单，做起来很不容易的

做歌词同步多折腾了一会，这首歌到后面混在一起唱的，都听不出来了，害得我听一遍又一遍的{:4_189:}

千羽 发表于 2022-11-16 22:14

红影 发表于 2022-11-16 22:12
做歌词同步多折腾了一会，这首歌到后面混在一起唱的，都听不出来了，害得我听一遍又一遍的

有兴致时我也来学歌词同步……{:4_181:}

红影 发表于 2022-11-16 22:14

千羽 发表于 2022-11-16 22:08
看起来正好的样子

黑黑的星星代码真的漂亮，估计随便放什么帖子里都会很好看。

红影 发表于 2022-11-16 22:14

千羽 发表于 2022-11-16 22:09
哈哈，有点神出鬼没的

是啊，也不知道他忙什么呢{:4_173:}

千羽 发表于 2022-11-16 22:14

红影 发表于 2022-11-16 22:14
黑黑的星星代码真的漂亮，估计随便放什么帖子里都会很好看。

是啊，既简单又美观实用{:4_173:}

千羽 发表于 2022-11-16 22:15

红影 发表于 2022-11-16 22:14
是啊，也不知道他忙什么呢

哈哈，忙吃喝玩乐{:4_173:}

红影 发表于 2022-11-16 22:15

千羽 发表于 2022-11-16 22:14
有兴致时我也来学歌词同步……

在黑黑的专版里有做歌词同步帖子，羽儿可以去试试。

查看完整版本: 最后一支舞 to冬小雨（学习黑黑双语歌词同步）