万 里
本帖最后由 杨帆 于 2026-2-13 22:38 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>万里 (《太平年》电视剧片尾主题曲)</title>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Wang+Xi+Zhi&family=Zhao+Meng+Fu&family=Ou+Yang+Xun&display=swap");
#papa{margin:30px 0;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;left:calc(50% - 81px);transform:translateX(-50%);--bg1:url('https://pic1.imgdb.cn/item/698c1c1669f3169ba02cd830.jpg') no-repeat center/cover;--bg2:url('https://pic1.imgdb.cn/item/698c1c8769f3169ba02cd84d.jpg') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:var(--bg1),var(--bg2);border-radius:20px;box-shadow:0px 0px 0px 2px #000000,0px 0px 15px 15px #006000;overflow:hidden;position:relative;display:grid;place-items:center;user-drag:none;user-select:none;--state:running;--display:block;z-index:1}
#vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.8;mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);-webkit-mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);object-position:center;display:block}
.vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.5;object-position:center;mix-blend-mode:screen;display:var(--display)}
#mdiv{position:absolute;top:50px;right:50px;z-index:10;width:80px;height:80px;display:grid;place-items:center;filter:drop-shadow(0 0 1px #8A2BE2);animation:rot 3s linear infinite var(--state);transition:opacity 0.3s;cursor:pointer;pointer-events:auto}
#mdiv:hover{animation-play-state:paused !important}
#mdiv>span{position:absolute;top:50%left:50%;width:50%;height:50%;background:linear-gradient(75deg,#FAFAD2 1%,#7CFC00,#ADFF2F,#32CD32,#FFD700);border-radius:100% 0;transform:rotate(var(--deg)) translate(21.5px,-50%)}
#mdiv>span:nth-of-type(1){--deg:0deg}
#mdiv>span:nth-of-type(2){--deg:72deg}
#mdiv>span:nth-of-type(3){--deg:144deg}
#mdiv>span:nth-of-type(4){--deg:216deg}
#mdiv>span:nth-of-type(5){--deg:288deg}
@keyframes rot{to{transform:rotate(1turn)}}
#mdiv:hover{filter:unset !important}
#fullscreen{position:absolute;top:30px;left:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8}
#fullscreen:hover{font-style:italic}
#lrc{--state:running;--motion:cover2;--tt:2s;--bg:linear-gradient(45deg,#ff0000,#ff6600,#ffff00);position:absolute;z-index:6;left:5%;top:15%;transform:translateX(-50%);font:normal 2.5em "Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";font-weight:400;color:#8A2BE2;white-space:pre;writing-mode:vertical-lr;background-clip:text;-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);--rect:0 0 100% 0;--border:0 1px 0 0;--c2:#F5F5F5}
#lrc::before{position:absolute;content:attr(data-lrc);width:100%;height:100%;color:transparent;overflow:hidden;white-space:pre;animation-play-state:var(--state);background:var(--bg);clip-path:inset(0 0 100% 0);-webkit-background-clip:text;animation:var(--motion) var(--tt) linear forwards var(--state);clip-path:inset(var(--rect));border:0px groove var(--c2);border-width:var(--border)}
@keyframes cover1{to{clip-path:inset(0 0 0 0)}}
@keyframes cover2{to{clip-path:inset(0 0 0 0)}}
.dancer{position:absolute;width:250px;height:120px;right:1%;bottom:5%;opacity:1;z-index:8;cursor:pointer;display:var(--display);transition:.3s;rotate:-5deg;animation:flash 0.5s infinite alternate,shake 1s infinite}
#prog{position:absolute;left:30%;bottom:7%;z-index:18;appearance: none;filter:invert(100%) hue-rotate(300deg);background:brown;width:40%;height:5px;cursor:pointer;pointer-events:auto;display:var(--display)}
#prog::-webkit-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-webkit-progress-bar {background:hsla(120,100%,50%,0.3);}
#prog::-moz-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-moz-progress-bar{background:hsla(120,100%,50%,0.3);}
#tmsg{position:absolute;right:22%;bottom:7%;z-index:8;font:normal 13px sans-serif;color:#fff;display:var(--display)}
#ptxt{position:absolute;left:25%;bottom:7%;z-index:8;font:normal 13px sans-serif;color:#fff;display:var(--display)}
@keyframes shake{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes flash{to{filter:hue-rotate(360deg)}}
#ppcontainer{margin:auto;position:absolute;width:100%;height:100px;bottom:5px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px}
@keyframes breath{0%{filter:brightness(1)}50%{filter:brightness(1.2)}100%{filter:brightness(1)}}
.mLine{position:relative;margin:0 2px -1px 0;width:6px;min-height:6px;max-height:180px;background:linear-gradient(to top,#64b5f6,#1e88e5,#64b5f6);transition:var(--tst);animation:breath 2s ease-in-out infinite;box-shadow:0 0 4px rgba(30,136,229,0.5)}
.mLine::before{position:absolute;content:'';width:100%;height:3px;background:var(--line-border-color,snow);top:0}
.mLine:nth-of-type(odd) { background: linear-gradient(to top,#ff0000,#ff6600,#ffff00); }
</style>
<div id="papa">
<progress id="prog"></progress>
<div id="ptxt">0%</div>
<div id="tmsg">00:00|00:00</div>
<div id="img-border"></div>
<div data-lrc="" id="lrc"></div>
<span id="fullscreen">全屏欣赏</span>
<div id="ppcontainer"></div>
<video id="vid" src="https://cccimg.com/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" autoplay loop muted></video>
<video class="vid" src="https://upfile.mp3.wf/view.php/66ed12e3bbef7d9836f2bb1ef6334c55.mp4" autoplay loop muted></video>
<img class="dancer" src="https://s3.bmp.ovh/imgs/2025/12/29/35ae6387f7b5758c.gif" alt="" title='暂停';>
<div id="mdiv" title='暂停';>
<span></span><span></span><span></span><span></span><span></span></div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/a73cc38514ebd01c78ce3d602de72903.mp3" loop autoplay playsinline></div>
<script>
var ypData=.map(val=>val*0.5);
var total=80,lines=[],idx,len,step;
for(j=0;j<total;j++){var el=document.createElement('span');el.className='mLine';ppcontainer.appendChild(el);lines.push(el)}
plusOrMinus=()=>Math.random()>0.5?1:-1;
output=(all,num)=>{if(num===0)return Array(all).fill(0);return Array(all).fill(0).map(item=>{const baseHeight=Math.random()*num*0.8;const offset=plusOrMinus()*num/4;let finalHeight=Math.ceil(baseHeight+offset);finalHeight=Math.max(finalHeight,6);finalHeight=Math.min(finalHeight,180);return finalHeight})};
(function update(){var ar=output(total,aud.paused?0:ypData);ar.forEach((a,k)=>{lines.style.height=ar+'px';if(a>120){const brightness=Math.random()>0.7?1.5:1;lines.style.filter=`brightness(${brightness})`}else{lines.style.filter='brightness(1)'}});window.requestAnimationFrame(update)})();
aud.addEventListener('timeupdate',()=>{idx=Math.floor(aud.currentTime/step)});
aud.addEventListener('canplay',()=>{len=ypData.length;step=aud.duration/len;const safeStep=Math.max(Math.min(step,0.2),0.1);papa.style.setProperty('--tst',safeStep+'s')});
</script><script>
const mdiv=document.getElementById('mdiv');
const aud=document.getElementById('aud');
const vids=document.querySelectorAll(',.vid');
const fullscreen=document.getElementById('fullscreen');
const papa=document.getElementById('papa');
const lrc=document.getElementById('lrc');
const dancer=document.querySelectorAll('.dancer');
mdiv.onclick=()=>{if(aud.paused){aud.play();vids.forEach(vid=>vid.play());dancer.forEach(item=>{item.style.setProperty('--display','')});papa.style.setProperty('--bg1','');papa.style.setProperty('--bg2','none');papa.style.setProperty('--display','');mdiv.style.animationPlayState='running';lrc.style.setProperty('--state','running')}else{aud.pause();vids.forEach(vid=>vid.pause());dancer.forEach(item=>{item.style.setProperty('--display','none')});papa.style.setProperty('--bg1','none');papa.style.setProperty('--bg2','');papa.style.setProperty('--display','none');mdiv.style.animationPlayState='paused';lrc.style.setProperty('--state','paused')}
mdiv.title=aud.paused?'播放':'暂停';dancer.forEach(item=>{item.title='Pause'})};
dancer.forEach(item=>{item.onclick=()=>mdiv.click()});
(function(){const lrcStr=`
万里 (《太平年》电视剧片尾主题曲) - 周深
词：明天/陈雪燃
曲：陈雪燃
编曲：陈雪燃
制作人：陈雪燃
音乐监制：明天@NEM
配唱制作人：徐威52Hz Studio Shanghai
人声录音师：徐威52Hz Studio Shanghai
人声录音室：52Hz Studio （Shanghai）
制谱：Ignacio Ramírez
吉他/曼陀林：IVAN, Justin Smith
贝斯：Marcin Palider
架子鼓：Nicola D.
键盘：Neemias T.
大提琴独奏：Judy Kang
和声：走走
交响乐团：Budapest Art Orchestra
交响乐录音监制：Miklós Lukács
交响乐指挥：Peter Pejtsik
交响乐录音师：David Lukacs
交响乐录音工程师：Gabor Buczko
交响乐录音棚：East Connection Music Recording, Studio 22
混音/母带：NEM Studios
音乐监制：连雅雯
项目统筹：李爽/张安琪
音乐发行：张安琪
音乐出品：华策音乐（天津）有限公司
录音棚：NEM Studios/West Lake Recording Studios
特别鸣谢：周深工作室
几万里崇山峻
几万里大江奔腾
几万里战马嘶鸣
几万里此情无声
几万里陌上花开
几万里鸿雁归来
几万里风雨峥嵘
几万里梦有归程
几万里 渡不尽一生世悲欢
几万里 看不完沧海千川
几万里 多少情深不惧万难
几万里 生死与共
只与你
几万里狂风啸
几万里路途迢迢
几万里青丝成雪
几万里思念如潮
几万里誓守天下
几万里四海一家
几万里与共一程
几万里梦醒无争
几万里 渡不尽一生世悲欢
几万里 看不完沧海千川
几万里 多少情深不惧万难
几万里 生死与共
只与你
几万里
几万里
几万里 月照天地无疆 归途心有所向
几万里 谁与我铁骑踏浪
生生世世 无悔同往
几万里 沧海桑田为证 誓守山河无恙
几万里 此心不渝
`;
let mKey=0;
let mFlag=true;
const averAdd=0.3;
let lrcAr=[];
const lrcTime=(ar)=>{const tmpAr=[];for(let j=0;j<ar.length;j++){if(j<ar.length-1){tmpAr=parseFloat((ar-ar).toFixed(1))}else{const avg=tmpAr.reduce((a,b)=>a+b)/tmpAr.length;tmpAr=parseFloat(avg.toFixed(1))}}
tmpAr.forEach((item,key)=>{ar=item});return ar};
const getLrcAr=(text)=>{const arr=[];const calcRule=;const lines=text.split('\n');lines.forEach(line=>{const geci=line.replace(/\d+[\.:]\d+([\.:]\d+)?/g,'').replace(/[\[\]\'\"\t,]s?/g,'').trim();if(!geci)return;const timeMatch=line.match(/\d+[\.:]\d+([\.:]\d+)?/g);if(!timeMatch)return;timeMatch.forEach(timeStr=>{const timeArr=timeStr.match(/\d+/g);let sec=0;timeArr.forEach((val,idx)=>{sec+=val*calcRule});arr.push()})});arr.sort((a,b)=>a-b);return lrcTime(arr)};
const showLrc=(time)=>{if(mKey>=lrcAr.length)mKey=0;const name=mFlag?'cover1':'cover2';lrc.innerText=lrcAr;lrc.dataset.lrc=lrcAr;lrc.style.setProperty('--motion',name);lrc.style.setProperty('--tt',time+'s');lrc.style.setProperty('--state',aud.paused?'paused':'running');mKey++;mFlag=!mFlag};
const calcKey=()=>{for(let j=0;j<lrcAr.length;j++){if(aud.currentTime<=lrcAr){mKey=j-1;break}}
if(mKey<0)mKey=0;if(mKey>=lrcAr.length)mKey=lrcAr.length-1;const time=lrcAr-(aud.currentTime-lrcAr);showLrc(time)};
lrcAr=getLrcAr(lrcStr);
aud.addEventListener('timeupdate',()=>{if(aud.paused)return;for(let j=mKey;j<lrcAr.length;j++){if(aud.currentTime>=lrcAr&&mKey===j){showLrc(lrcAr);break}
if(mKey>=lrcAr.length){mKey=0}}});
aud.addEventListener('pause',()=>{lrc.style.setProperty('--state','paused')});
aud.addEventListener('play',()=>{lrc.style.setProperty('--state','running')});
aud.addEventListener('seeked',calcKey);
showLrc(lrcAr)})();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault()));
let fs=true;let fsTimer;
fullscreen.onclick=()=>{fs?(fullscreen.innerText='退出全屏',papa.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());fs=!fs};
papa.addEventListener('mousemove',()=>{clearTimeout(fsTimer);fullscreen.style.opacity='1';fsTimer=setTimeout(()=>{fullscreen.style.opacity='0'},3000)});
mdiv.onanimationiteration=()=>mdiv.style.setProperty('filter',`hue-rotate(${45+Math.random()*120}deg)`);
aud.ontimeupdate=()=>prog.value=aud.currentTime/aud.duration;
prog.onclick=(e)=>aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
aud.addEventListener('timeupdate',()=>{tmsg.innerText=toMin(aud.currentTime)+'/'+toMin(aud.duration)});
function toMin(val){if(!val)return '00:00';val=Math.floor(val);let min=parseInt(val/60);let sec=parseFloat(val%60);if(min<10)min='0'+min;if(sec<10)sec='0'+sec;return min+':'+sec}
aud.addEventListener("timeupdate",function(){var percent=aud.currentTime/aud.duration;var sp=600/100;var swidth=(percent*100*sp)+"px";document.getElementById("ptxt").innerText=((percent*100).toFixed(2))+"%"})
</script>
</body>
</html>
https://pic.rmb.bdstatic.com/bjh/news/693df307cd42c2cc2603e2cec3e20a09.gif 也曾年轻 发表于 2026-2-14 08:32
谢谢年轻老师鼓励，祝新春快乐 马年大吉{:4_176:} 这图片和歌曲震撼人心！谢谢杨帆带来的精彩分享！{:4_187:} 漂亮的制作，欣赏扬帆好帖{:4_199:} 漂亮的制作，欣赏扬帆好帖{:4_199:} 问好杨帆，欣赏美贴，祝福新年快乐，万事如意！{:4_190:} 梦江南 发表于 2026-2-14 17:20
这图片和歌曲震撼人心！谢谢杨帆带来的精彩分享！
问好江南，谢谢鼓励，新春快乐{:4_204:} 红影 发表于 2026-2-14 18:41
漂亮的制作，欣赏扬帆好帖
问好影子，谢谢鼓励，新春快乐{:4_204:} 本帖最后由 杨帆 于 2026-2-14 19:16 编辑
了了子 发表于 2026-2-14 18:58
问好杨帆，欣赏美贴，祝福新年快乐，万事如意！
谢谢了了子老师鼓励，祝新春快乐，马年大吉{:4_176:} 杨帆这个制作大气，氛围很好，正能量的制作{:4_199:} 杨帆以后制作这种歌词记得不要用这么长的歌词，可以分小段歌词，这样不会超出画面 欣赏杨帆好制作
也是祝福杨帆新年快乐！ 祝福新的一年好运连连，好事多多，开心快乐！幸福永远！{:4_204:} 祝福新的一年好运连连，好事多多，开心快乐！幸福永远！{:4_204:} 小辣椒 发表于 2026-2-15 22:51
杨帆这个制作大气，氛围很好，正能量的制作
谢谢小辣椒鼓励，祝新春快乐 马年大吉{:4_204:} 小辣椒 发表于 2026-2-15 22:52
杨帆以后制作这种歌词记得不要用这么长的歌词，可以分小段歌词，这样不会超出画面
是，很好的建议，谢谢小辣椒{:4_204:} 欣赏杨帆好贴，点赞！{:4_190:} 了了子 发表于 2026-2-23 20:40
欣赏杨帆好贴，点赞！
谢谢了了子老师鼓励，祝马年大吉大利{:4_190:}
页:
[1]