论坛 › 欢乐水吧 › 繁花落尽 - 陈瑞

亚伦影音工作室 发表于 2024-3-3 14:55

繁花落尽 - 陈瑞

本帖最后由 亚伦影音工作室 于 2024-4-1 14:52 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
audio {position:absolute;top:580px;z-index: 50;
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;
}

#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%,#EE0000 35%,#EE0000 65%,#EE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #000079;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: 15;}
#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);}}

li-zi { z-index: 4;top:1600px;left: 0px;position:absolute;background: url('https://pic.imgdb.cn/item/65e425459f345e8d0363d300.png')0 0/cover; offset-path: path('M0 400 Q50 410 1140 40'); offset-distance: 0; animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { 100% { offset-distance: 100%;} }
</style>
<div id="papa">
<divid="body" ><li-zi ></li-zi ></div>
<audioid="aud" loop >
<source src="https://bzgz.club/view.php/537d5cae32e4f69003cf28004062f12e.mp3" type="audio/mp3" /></audio>
<div id="mplayer" title="暂停/播放"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>

<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
mplayer.onclick = () => aud.paused ? (aud.play()): (aud.pause());
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</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>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: all=40}).forEach(star => {
      var size = 20 + 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>

<style>
#mplayer{position: absolute;z-index: 50;
    left:10px;top:470px;
    width: 120px;
    height: 120px;
    background:
      linear-gradient(tan 50%, #00ff00 0),
      linear-gradient(90deg, #ff0000 50%, #00ff00 0),
      radial-gradient(circle, #ffffff 2px, #000000 6px, transparent 6px, transparent 0);
    background-blend-mode: saturation;
    clip-path: polygon(0 50%, 33.3% 33.3%, 50% 33.3%, 50% 0, 66.6% 33.3%, 66.6% 50%, 100% 50%, 66.6% 66.6%, 50% 66.6%, 50% 100%, 33.3% 66.6%, 33.3% 50%);
animation: fengche 6s linear infinite ;
}

@keyframes fengche {0% {transform: rotate(360deg);}}
</style>

红影 发表于 2024-3-3 15:15

很漂亮的制作。不过粒子遮挡人物面部了呢，调整一下会更好呢。
欣赏亚伦老师好帖{:4_199:}

绿叶清舟 发表于 2024-3-3 21:46

漂亮的制作，陈瑞的声音一直喜欢了{:4_204:}

查看完整版本: 繁花落尽 - 陈瑞