论坛 › 欢乐水吧 › 这杯酒敬你也敬自己 - 梅朵【动画模板来自马黑老师】

亚伦影音工作室 发表于 2024-2-29 10:32

这杯酒敬你也敬自己 - 梅朵【动画模板来自马黑老师】

本帖最后由 亚伦影音工作室 于 2024-4-16 09:31 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background: linear-gradient(0deg, rgba(0, 0, 0, 0) 6%, transparent 6%),url(https://pic.imgdb.cn/item/65d054569f345e8d0339cb08.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:0px;margin-left: -300px;}
audio {position:absolute;top:580px;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
li-zi { position: absolute; background: url('https://pic.imgdb.cn/item/653ddeb0c458853aef398909.png')no-repeat 0 0/cover; offset-path: path('M0 400 Q570 -260 1140 400'); offset-distance: 0; animation: move 10s linear infinite, rotating 5s infinite ; }
@keyframes move { to { offset-distance: 100%; filter:hue-rotate(360deg)contrast(100%)brightness(150%);} }
#lrc{left: 10%;top: 75%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #222222;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);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

</style>
<div id="papa">

<audioid="aud" loop controls >
<source src="https://bzgz.club/view.php/3236a0494ee95a13a86943c10bdb1d8f.mp3" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
</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")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

<script>


    Array.from({length: all=40}).forEach(star => {
      var size = 120 + Math.floor(Math.random() * 30);
      star = document.createElement('li-zi');
      star.style.cssText += `
            left: 0;
            top: ${Math.random() * 140 + 60}px;
            width: ${size}px;
            height: ${size}px;
            opacity: ${Math.random() * 0.4 + 0.4};
            animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
      `;
      papa.prepend(star);
    });

</script>

世外桃源 发表于 2024-2-29 14:56

好看 好听，效果非常好，欣赏了

红影 发表于 2024-2-29 20:12

这样的粒子泡泡好漂亮，亚伦老师的帖子真棒{:4_199:}
这个没使用按钮代码名称吧，好像用了黑黑的这个组装后，有差异的地方都会被提醒呢{:4_204:}

查看完整版本: 这杯酒敬你也敬自己 - 梅朵【动画模板来自马黑老师】