天下过客
本帖最后由 杨帆 于 2026-4-17 17:05 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>天下过客 - 电影《镖人》主题曲</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
.wrapper{position:relative;margin:30px 0;width:1280px;height:780px;left:calc(50% - 81px);transform:translateX(-50%);overflow:hidden;z-index:1;background:url(var(--bg1)) no-repeat center /;font-family:'SimHei','Noto Sans SC', 'Ma Shan Zheng','华文行楷','Arial', 'sans-serif';box-shadow:0 10px 30px rgba(0,0,0,0.5);border-radius:10px;--state:running;--bg1: #ccc url('https://638183.freep.cn/638183/t24/6/stage.jpg') no-repeat center/100% 100%; --bg2: #ccc url('https://pic1.imgdb.cn/item/69e1c35dacf11c5279c8c313.jpg') no-repeat center/100% 100%;background:#ccc var(--bg1);}
.container{position:absolute;width:150%;height:150%;transform:translateX(-50%) scale(.6);left:calc(50%);top:-25%;z-index:3;display:var(--display);background-color:initial;border:6px white groove;overflow:hidden;border-radius:24px;}
.scroll-text{position:absolute;left:calc(50% - 10px);transform:translateX(-50%);top:38%;width:auto;max-height:200px;overflow:hidden;font-family:"Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";color:#F8F3EB;user-drag:none;user-select:none;line-height:1.8;font-size:18px;text-shadow:1px 1px 1px #222;z-index:5;}
#mdiv{position:absolute;top:50px;right:50px;z-index:9;width:180px;height:180px;filter:drop-shadow(0 0 10px #8A2BE2);cursor:pointer;--bg1:url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif') no-repeat center / 100% 100%;--bg2:url('https://pic1.imgdb.cn/item/69a995cfa1838fcbddfc9d9a.png') no-repeat center / 100% 100%;background:var(--bg1), var(--bg2);transition:all 0.3s;}
#mdiv:hover{filter:unset;}
.vid{position:absolute;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.8;object-position:center;mix-blend-mode:lighten;z-index:-1;}
.Main-title{left:calc(50% - 10px);transform:translateX(-50%);top:83%;font-weight:900;font-size:4rem;text-align:center;font-family:"华文宋体","Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";background-color:#DAA520;background-clip:text;-webkit-background-clip:text;background-clip:text;color:transparent;position:absolute;z-index:5;letter-spacing:18px;}
.Main-title::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255,255,255,0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255,255,255,0.6) 32rem, white 33rem, rgba(255,255,255,0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255,255,255,0.3) 45rem, transparent 50rem, transparent 100%);background-clip:text;-webkit-background-clip:text;background-size:150% 100%;background-repeat:no-repeat;animation:shine 5s infinite linear var(--state);}
@keyframes shine{0%{background-position:50% 0;}100%{background-position:-190% 0;}}
#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:15;}
#fullscreen:hover{font-style:italic;}
</style>
</head>
<body>
<div class="wrapper">
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted playsinline></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" autoplay loop muted playsinline></video>
<p class="Main-title" data-text="天下过客">天下过客</p>
<span id="fullscreen">全屏欣赏</span>
<div id="mdiv" title="暂停"></div>
<div class="container">
<iframe id="music-iframe" height="100%" src="https://bbs.cnzv.cc/mpv.php/htm-5370-1776184267.html" frameborder="0" width="100%" scrolling="no"></iframe>
</div>
<div style="margin:auto;width:700px;height:200px;background-color:initial;line-height:200px;">
<div class="scroll-text">
<marquee id="text-scroll" scrollamount="2" direction="up" style="min-width:600px;max-height:180px;margin:10px 0;text-align:justify;">
<h2>天下过客 - 电影《镖人》主题曲</h2><br>
<p style="border-left:2px solid #1a73e8;">
《天下过客》是 2026 年春节档武侠电影《镖人》的主题曲<br>
由王嘉尔演唱，俞白眉、甘世佳作词，唐汉霄作曲，于飞担任制作人<br>
2026 年 2 月 14 日上线</p>
<h2>一、核心信息</h2>
<p style="border-left:2px solid #1a73e8;">
演唱：王嘉尔（标志性烟嗓，融合武侠苍凉与现代力量）<br>
词曲：俞白眉（电影监制）+ 甘世佳（词）；唐汉霄（曲）<br>
编曲：传统弦乐 / 民乐（古筝、笛子）+ 电子鼓点 / 说唱<br>
主题：大漠江湖、孤勇漂泊、侠义与自由</p>
<h2>二、风格与亮点</h2>
<p style="border-left:2px solid #1a73e8;">
曲风：武侠史诗感，旋律开阔、编曲张力强<br>
演唱：王嘉尔用颗粒感烟嗓塑造侠客气质<br>
歌词：以“天下苍生皆过客”开篇，写尽漂泊与孤勇</p>
<h2>三、传播与反响</h2>
<p style="border-left:2px solid #1a73e8;">
上线即登顶音乐平台热度榜<br>
成为影片重要宣传符号<br>
被评价为“传统武侠精神的年轻化表达”</p>
</marquee>
</div>
</div>
</div>
<script>
const iframe=document.getElementById('music-iframe');
const textScroll=document.getElementById('text-scroll');
const mdiv=document.getElementById('mdiv');
const videos=document.querySelectorAll('video');
const container=document.querySelector('.container');
const MainTitle=document.querySelector('.Main-title');
const wrapper=document.querySelector('.wrapper');
const fullscreen=document.getElementById('fullscreen');
const bg1 = getComputedStyle(wrapper).getPropertyValue('--bg1');
const bg2 = getComputedStyle(wrapper).getPropertyValue('--bg2');
let isPlaying=true;
mdiv.onclick=()=>{
function random(min,max){return Math.floor(Math.random()*(max-min+1))+min;}
function randomColor(){
const r=random(0,60).toString(16).padStart(2,'0');
const g=random(0,255).toString(16).padStart(2,'0');
const b=random(0,255).toString(16).padStart(2,'0');
return '#'+r+g+b;
}
MainTitle.style.backgroundColor=randomColor();
videos.forEach((vid)=>{isPlaying?vid.pause():vid.play();});
container.style.setProperty('--display',isPlaying?'none':'');
wrapper.style.setProperty('--state',isPlaying?'paused':'running');
wrapper.style.background = isPlaying ? bg2 : bg1;
if(!isPlaying){
playMusic();
mdiv.style.setProperty('--bg1','');
mdiv.style.setProperty('--bg2','none');
mdiv.title='暂停';
}else{
pauseMusic();
mdiv.style.setProperty('--bg1','none');
mdiv.style.setProperty('--bg2','');
mdiv.title='播放';
}
isPlaying=!isPlaying;
};
function playMusic(){iframe.contentWindow.postMessage('play','*');textScroll.start();}
function pauseMusic(){iframe.contentWindow.postMessage('pause','*');textScroll.stop();}
let fs=true,fsTimer;
fullscreen.onclick=()=>{fs?(fullscreen.innerText='退出全屏',wrapper.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());fs=!fs;};
wrapper.addEventListener('mousemove',()=>{clearTimeout(fsTimer);fullscreen.style.opacity='1';fsTimer=setTimeout(()=>{fullscreen.style.opacity='0';},3000);});
window.addEventListener('message',(e)=>{if(e.data==='music-play'){textScroll.start();isPlaying=true;}if(e.data==='music-pause'){textScroll.stop();isPlaying=false;}});
</script>
</body>
</html> 烟嗓的演唱与大片完美契合！视听享受！{:4_199:} https://img1.baidu.com/it/u=2325170550,831110892&fm=253&fmt=auto&app=138&f=GIF?w=304&h=304 杨帆现在玩代码这么溜了，进步太快了{:4_199:} 欣赏杨帆好制作 小辣椒 发表于 2026-4-16 22:03
杨帆现在玩代码这么溜了，进步太快了
问好小辣椒，鼓捣着玩呢，谢谢鼓励{:4_204:} 很奇妙的制作，两个小播，点击大的小播，视频不见，点视频里的那个小播，也可以暂停，视频还在。
很漂亮的频谱制作和同步歌词制作，欣赏杨帆好帖{:4_199:} 红影 发表于 2026-4-16 22:13
很奇妙的制作，两个小播，点击大的小播，视频不见，点视频里的那个小播，也可以暂停，视频还在。
很漂亮的 ...
问好影子，鼓捣着玩呢，谢谢鼓励{:4_187:} 很有气势的音画，制作特别漂亮。欣赏点赞{:4_187:} 梦江南 发表于 2026-4-18 17:16
很有气势的音画，制作特别漂亮。欣赏点赞
谢谢江南鼓励，祝开心{:4_187:} 杨帆 发表于 2026-4-16 22:52
问好影子，鼓捣着玩呢，谢谢鼓励
这个做得很好，杨帆谦虚呢{:4_187:} 红影 发表于 2026-4-18 22:42
这个做得很好，杨帆谦虚呢
谢谢影子鼓励，玩也有质地，共同学习{:4_204:} 杨帆 发表于 2026-4-18 22:50
谢谢影子鼓励，玩也有质地，共同学习
杨帆的学习成效很大呢{:4_187:} 红影 发表于 2026-4-19 21:44
杨帆的学习成效很大呢
谢谢影子鼓励，只是喜欢鼓捣而已 杨帆 发表于 2026-4-20 20:21
谢谢影子鼓励，只是喜欢鼓捣而已
鼓捣得很有成效呢{:4_199:}
页:
[1]