万顷湖 发表于 2026-8-2 14:46

午夜的街头-张蕊

本帖最后由 万顷湖 于 2026-8-3 05:20 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_120985">
<br /><br /><div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-210px;MARGIN-top:150px;">
<style>
#papa {margin: 10px 20px;width: 1164px;height: 820px;background:#000000 ;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;position: relative;overflow: hidden;z-index: 12345;}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;}
#bfq{position: absolute;width: 250px;height: 250px;top:320px; left:45px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(0.6);}
#cd{top:40px; left:0px;z-index: 10;position: absolute;width: 200px;height: 200px;border-radius: 50%;background:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png')no-repeat center/cover;animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }}
#mplayer {z-index: 80;position: absolute;left: 0;bottom: 0px;width: 250px;height: 250px;opacity: 1;transition: .2s;place-items: center;--disp1: 0; --disp2: 1;}
#mplayer::before , #mplayer::after{position: absolute;content: '';cursor: pointer;transition: .2s;}
#mplayer::before {width: 250px;height: 250px;opacity: 1;background:url(https://pic.imgdb.cn/item/65f5104b9f345e8d03c1d60f.png)no-repeat center/cover;opacity: var(--disp1);}
#mplayer::after {width: 250px;height: 250px;opacity: 1;background:url(https://pic.imgdb.cn/item/65f5103d9f345e8d03c17eca.png)no-repeat center/cover;opacity: var(--disp2);}
#tmsg {position: absolute;z-index: 91;font: normal 15px sans-serif;color: #ffffff; top:92%;left:24%;}
#prog {position: absolute;z-index: 91;width: 100%;height: 7%;cursor: pointer; top:97%;box-shadow: 0px 0px 0.1px 0.1px #000000;left:0%;
border-radius: 3px;}
</style>
<div id="papa">
<video id="vid"src="http://www.cccimg.com/view.php/897b6ba15e2b8a27caf2a639011ae843.mp4" muted autoplay loop></video>
<divid="prog"></div>
<div id="bfq"><div id="mplayer"></div><div id="tmsg">00:00 | 00:00</div>
<div id="cd" ></div></div>
<div data-lrc="可爱老人网" id="lrc">可爱老人网</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/156557.mp3" loop autoplay></audio>
<style type="text/css">
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: #880000;position: absolute;z-index: 4;left: 50%;transform: translate(-50%);top: 84%;font:normal 2em 华文隶书;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 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {let lrcStr = `午夜的街头 - 张蕊
午夜的街头 有我沉沉的冷漠
那驱散不尽的冷风
打断我尚未完结的梦
午夜的街头 多少故事在其中
那即将熄灭的烟头
提醒我剧终的时候
如果说这是路的尽头
我想我不再回头
就让这些燃烧的梦
一起熄灭 一起熄灭
在午夜的街头 让我潇洒的走过
穿越那无奈的忧愁
走出那午夜笼罩的尽头
午夜的街头 有我沉沉的冷漠
那驱散不尽的冷风
打断我尚未完结的梦
午夜的街头 多少故事在其中
那即将熄灭的烟头
提醒我剧终的时候
如果说这是路的尽头
我想我不再回头
就让这些燃烧的梦
一起熄灭 一起熄灭
在午夜的街头 让我潇洒的走过
穿越那无奈的忧愁
走出那午夜笼罩的尽头
`;
let mKey = 0, mFlag = true, 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;
};
let getLrcAr = (text) => {
      let lrcAr = [];
      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) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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;
                }
      }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();
cd.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>cd.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>cd.style.animationPlayState = 'paused');
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
prog.onclick = (e) => {aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #800000, #800000, #800000 '+ aud.currentTime / aud.duration * 100 + '%, #444444 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
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>
</div>
<div style="width: 100%;height: 1280px;">&nbsp;</div>
</td></tr></table>





梦江南 发表于 2026-8-2 15:15

{:4_174:}

梦江南 发表于 2026-8-2 15:17

万老师的这帖文字特效非常漂亮，欣赏点赞!{:4_187:}

梦油 发表于 2026-8-2 15:56

欣赏万顷湖精彩制作，祝愿万顷湖天天快乐。

杨帆 发表于 2026-8-2 16:18

好听好看，谢谢万顷湖老师精彩分享{:4_190:}

红影 发表于 2026-8-2 18:48

制作漂亮，很多特别的效果。歌曲好听，画面精彩。
欣赏万顷湖老师好帖{:4_187:}

红影 发表于 2026-8-2 18:50

帖子里出现的“勰鼎楼”不知是什么渊源，没看懂呢。

万顷湖 发表于 2026-8-2 19:10

梦江南 发表于 2026-8-2 15:15


白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中万幸。祝各位快乐度夏，事事如意。谢谢鼓励。

万顷湖 发表于 2026-8-2 19:11

梦油 发表于 2026-8-2 15:56
欣赏万顷湖精彩制作，祝愿万顷湖天天快乐。

白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中万幸。祝各位快乐度夏，事事如意。谢谢鼓励。

万顷湖 发表于 2026-8-2 19:11

杨帆 发表于 2026-8-2 16:18
好听好看，谢谢万顷湖老师精彩分享

白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中万幸。祝各位快乐度夏，事事如意。谢谢鼓励。

万顷湖 发表于 2026-8-2 19:15

红影 发表于 2026-8-2 18:48
制作漂亮，很多特别的效果。歌曲好听，画面精彩。
欣赏万顷湖老师好帖

白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中万幸。祝各位快乐度夏，事事如意。谢谢鼓励。（所居自命勰鼎楼，附庸风雅，贻笑大方之家。）

梦江南 发表于 2026-8-2 19:57

万顷湖 发表于 2026-8-2 19:10
白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中 ...

老夫子讲话文绉绉的，下里巴人可听不懂。{:4_173:}

梦油 发表于 2026-8-2 20:08

万顷湖 发表于 2026-8-2 19:11
白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中 ...

谢谢万顷湖朋友的美好祝福。

红影 发表于 2026-8-2 22:01

万顷湖 发表于 2026-8-2 19:15
白居易：“故交海内只三人，二坐岩廊一卧云。”老者摆弄，一无可取，你们或坐岩廊，或正卧云，画面不幸中 ...

“所居自命勰鼎楼”，原来如此，只是貌似没必要做在帖子中呢{:4_173:}
万顷湖谦虚，您将坛友单做海内知交，也是好意。祝创作快乐{:4_187:}

万顷湖 发表于 2026-8-3 05:23

红影 发表于 2026-8-2 22:01
“所居自命勰鼎楼”，原来如此，只是貌似没必要做在帖子中呢
万顷湖谦虚，您将坛友单做海内知 ...

已修改，谢谢指导。
页: [1]
查看完整版本: 午夜的街头-张蕊