论坛 › 欢乐水吧 › 你来与不来我都在等你 - 肖锦美

亚伦影音工作室 发表于 2024-6-27 14:41

你来与不来我都在等你 - 肖锦美

本帖最后由 亚伦影音工作室 于 2024-6-27 17:34 编辑 <br /><br /><style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); background:url('https://pic.imgdb.cn/item/663f05bb0ea9cb14039b2934.jpg')no-repeat center/cover;width: 1200px; height: 700px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
li-zi { position: absolute; top: 0px; width: 440px; height: 440px; border-radius: 0%; background: olive; offset-path: path('M600 800 Q-500 450,860 -30'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0,0.36,0,0.14) infinite var(--state);z-index: 2; }
#tBox { font-size: 20px; }
#player { position: absolute; left: 10%; bottom: 320px;mix-blend-mode: screen; width: 120px; height: 120px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); z-index: 81;}
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
#bjbs{animation: rotating 3s linear infinite;width: 1200px; height: 700px;position:absolute;background:url('https://pic.imgdb.cn/item/663f05bb0ea9cb14039b2934.jpg')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(120%)brightness(110%);}}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3.5em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="tz">
<div id="bjbs"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/e4/88/65/7a1cf54f1deace51524059c6f1315b4e/audio.mp3" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png" />
</div>

<script>
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');

new Array(total = 16).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
               background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png') no-repeat center/cover;
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(26).substring(2,8)};
        `;
        tz.prepend(i);
});
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>


<span id="lrcStr" style="visibility: hidden;">
你来与不来我都在等你 - 肖锦美
作词：绿柳
作曲：李旭辉
编曲：烟雨憾
你来与不来我都在等你 - 肖锦美
沏一壶春色我在等你
等你一起看小草长出新绿
还记得那年杏花烟雨
人海之中我们相遇
鞠一捧秋风我在等你
等你一起看枫叶染红天地
还记得那年绵绵秋雨
花纸伞下人影相依
你来与不来我都在等你
等你一起去看梨花满地
想爱就爱彼此珍惜
月亮它会见证这奇迹
你来与不来我都在等你
等你一起去听落叶絮语
想爱就爱不再分离
相拥着到下一个世纪
鞠一捧秋风我在等你
等你一起看枫叶染红天地
还记得那年绵绵秋雨
花纸伞下人影相依
你来与不来我都在等你
等你一起去看梨花满地
想爱就爱彼此珍惜
月亮它会见证这奇迹
你来与不来我都在等你
等你一起去听落叶絮语
想爱就爱不再分离
相拥着到下一个世纪
你来与不来我都在等你
等你一起去听落叶絮语
想爱就爱不再分离
相拥着到下一个世纪
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let arr="";
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

老谟深虑 发表于 2024-6-27 15:16

         这个大妈很好，字体颜色好看。这个代码到离坛字幕不动。

红影 发表于 2024-6-27 16:33

粒子还能这样替换，是一群小点点呢，没想到。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-6-27 20:44

欣赏亚伦精彩制作{:4_187:}

查看完整版本: 你来与不来我都在等你 - 肖锦美