梦底 - 海来阿木&谭维维
本帖最后由 杨帆 于 2026-2-28 20:35 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>梦底 - 海来阿木/谭维维</title>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin:30px 0;width:1280px;height:780px;left:calc(50% - 81px);transform:translateX(-50%);background:url('https://638183.freep.cn/638183/t24/w7/cdww_134079371586465000.webp') no-repeat center/cover;box-shadow:4px 4px 8px black;overflow:hidden;display:grid;place-items:center;z-index:1;position:relative;--state:running;}
#papa::before, #papa::after {position:absolute;display:var(--display);content:'';top:190px;left:30px;width:140px;height:140px;background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250920-d6994dc217ef0e4fdb52d734abfdd59d.gif') no-repeat center/contain;}
#papa::after {top:110px;left:650px;width:120px;height:120px;background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg') no-repeat center/contain;transform:rotateY(-180deg);}
#papa > img {position:absolute;display:var(--display);mix-blend-mode:screen;}
#papa > img:nth-of-type(2) {transform:rotateY(-180deg);}
#vid {position:absolute;inset:0;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;opacity:.2;}
#mplayer {position:absolute;display:flex;gap:calc(var(--discSize) + 10px);color:snow;font-size:12px;--discBg:conic-gradient(tan,green,pink,purple);--discSize:36px;--hh:120px;bottom:40px;--width:3px;}
#mplayer::before, #mplayer::after {position:absolute;content:'';}
#mplayer::after {width:var(--discSize);height:var(--discSize);left:calc(50% - var(--discSize) / 2);top:calc(50% - var(--discSize) / 2);background:var(--discBg);border-radius:50%;cursor:pointer;animation:rot 5s infinite linear var(--state);}
#mplayer::before {content:attr(data-tt);height:100%;white-space:pre;left:50%;line-height:calc(var(--hh) / 2);transform:translate(-50%);}
#ppdiv {width:fit-content;height:var(--hh);display:flex;justify-content:center;align-items:center;}
#copydiv {transform:rotateY(-180deg);}
pin-pu {width:2px;height:2px;background:blue;animation:change var(--du) var(--delay) infinite alternate ease-in var(--state);}
#lrc {--motion:cover2;-tt:1s;--bg:linear-gradient(180deg,hsla(290,100%,50%,.75),hsla(310,100%,100%,.85));position:absolute;font-size:clamp(2rem,5vw,3rem);letter-spacing:clamp(8px,2vw,10px);color:DeepPink;white-space:pre-wrap;font-family:"Ma Shan Zheng","SimHei",cursive;user-select:none;user-drag:none;text-shadow:1px 1px 2px rgba(0,0,0,0.1);color:hsl(200, 100%, 50%);white-space:pre;-webkit-background-clip:text;filter:drop-shadow(1px 1px 2px hsla(0,100%,0%,.85));z-index:9;top:50px;left:50%;transform:translateX(-50%);width:80%;text-align:center;}
#lrc::before {position:absolute;content:attr(data-lrc);width:0%;height:100%;color:transparent;overflow:hidden;white-space:pre;background:var(--bg);filter:inherit;-webkit-background-clip:text;animation:var(--motion) var(--tt) linear forwards var(--state);}
#btnFs {--color:white;--bg:#0089f0;position:absolute;color:var(--color);background:var(--bg);opacity:0;border:2px solid var(--color);border-radius:8px;padding:6px 8px;transition:all .75s;cursor:pointer;z-index:10;top:20px;right:20px;}
@keyframes change {to {height:var(--hh);}}
@keyframes rot {to {transform:rotate(360deg);}}
@keyframes cover1 {from {width:0%;} to {width:100%;}}
@keyframes cover2 {from {width:0%;} to {width:100%;}}
#playTip {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;padding:20px 40px;border-radius:10px;cursor:pointer;z-index:9;}
#papa button { position:absolute;cursor:pointer;z-index:10;top:20px;left:20px;padding: 6px 12px; background: #eeffdd; border-radius: 10px; border-color: darkgreen; opacity: 0;transition: opacity 0.3s;}
#papa button:hover { background: #ffeecc; color: red; }
#papa { padding: 16px 20px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
#papa .tRed {font: bold 1.5em/1.5 STLiti; color: DeepPink !important; }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" alt="" style="width:100%;height:100%;left:0px;top:0px;">
<img src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" alt="" style="width:100%;height:100%;left:0px;top:0px;">
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/33/5d1e16fbefc2e.mp4" autoplay loop muted></video>
<div id="mplayer" data-tt="0:00 0:00">
<div id="ppdiv"></div>
<div id="copydiv"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">一世情</div>
<span id="btnFs">全屏观赏</span>
<div id="playTip"></div>
<audio id="aud" src="https://www.joy127.com/url/144778.mp3" autoplay loop></audio>
<button popovertarget="popover1">点我查看</button>
<div id="popover1" popover>
<p>歌曲《梦底》由歌手海来阿木创作，在2026年央视春晚首次公开演唱。<br>春晚播出后，该歌曲迅速登上各大音乐平台热搜，被观众誉为“有电影感的歌曲”“春晚最治愈舞台”。<br>歌曲与舞蹈完美契合，真挚情感表达与前沿科技融合，成为本届春晚最具影响力的节目之一。<br>谢谢欣赏~祝您新春快乐，马年大吉大利！</p><br>
<p class = "tRed" ><em><strong> [点击页面的任何地方，关闭我] </strong></em></p>
</div></div>
<script>
(function(){
const config={
papa:'#papa',
lrcAr:[
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
],
pinpu:{
num:220,
size:2,
gap:0,
color1:'Azure',
color2:'Blue'
}
};
function initPlayer(){
const papa=document.querySelector(config.papa);
const aud=document.getElementById('aud');
const mplayer=document.getElementById('mplayer');
const lrc=document.getElementById('lrc');
const btnFs=document.getElementById('btnFs');
const ppdiv=document.getElementById('ppdiv');
const copydiv=document.getElementById('copydiv');
const playTip=document.getElementById('playTip');
let mKey=0,mFlag=true,ppnum=config.pinpu.num||60,fs=false,timerId;
const mState=()=>{
if(aud.paused){
papa.style.setProperty('--state','paused');
lrc.style.setProperty('--state','paused');
papa.style.setProperty('--display','none');
vid.pause();
}else{
papa.style.setProperty('--state','running');
lrc.style.setProperty('--state','running');
papa.style.setProperty('--display','');
vid.play();
}
};
const showLrc=(time)=>{
if(mKey>=config.lrcAr.length-1)return;
const name=mFlag?'cover1':'cover2';
lrc.innerHTML=config.lrcAr;
lrc.dataset.lrc=config.lrcAr.replace(/<br>/,'\n');
lrc.style.setProperty('--motion',name);
lrc.style.setProperty('--tt',time+'s');
lrc.style.setProperty('--state','running');
mKey+=1;
mFlag=!mFlag;
};
const calcKey=()=>{
for(let j=0;j<config.lrcAr.length;j++){
if(aud.currentTime<=config.lrcAr){
mKey=j-1;
break;
}
}
if(mKey<0)mKey=0;
if(mKey>config.lrcAr.length-1)mKey=config.lrcAr.length-1;
const time=config.lrcAr-(aud.currentTime-config.lrcAr);
showLrc(time);
};
const toMin=(val)=>{
if(!val||isNaN(val))return'0:00';
const min=parseInt(val/60);
let sec=parseFloat(Math.floor(val)%60);
if(sec<10)sec='0'+sec;
return min+':'+sec;
};
const createPinpu=()=>{
const total=Math.ceil(config.pinpu.num/2)||50;
const ppHeight=ppdiv.offsetHeight||120;
Array.from({length:total}).forEach((_,key)=>{
const item=document.createElement('pin-pu');
const color1=config.pinpu.color1||`#${Math.random().toString(16).substr(-6)}`;
const color2=config.pinpu.color2||'snow';
item.style.cssText+=`
width:${config.pinpu.size}px;
background:linear-gradient(to top,${color2},${color1},${color2});
margin-right:${config.pinpu.gap}px;
--hh:${30+Math.random()*(ppHeight-30)}px;
--du:${.3*Math.random()+.3}s;
--delay:-${Math.random()}s;
`;
ppdiv.appendChild(item);
});
const clone=ppdiv.cloneNode(true);
copydiv.appendChild(clone);
};
playTip.onclick=()=>{
aud.play().then(()=>{
playTip.style.display='none';
mState();
}).catch(err=>{
console.log('播放失败：',err);
});
};
mplayer.onclick=()=>{
if(aud.paused){
aud.play();
}else{
aud.pause();
}
};
aud.addEventListener('timeupdate',()=>{
mplayer.dataset.tt=toMin(aud.currentTime)+'\n'+toMin(aud.duration);
for(let j=0;j<config.lrcAr.length;j++){
if(aud.currentTime>=config.lrcAr&&mKey===j){
showLrc(config.lrcAr);
}
}
});
aud.addEventListener('pause',mState);
aud.addEventListener('play',mState);
aud.addEventListener('seeked',calcKey);
btnFs.onclick=()=>{
try{
if(fs){
document.exitFullscreen();
}else{
papa.requestFullscreen();
}
}catch(err){
console.log('全屏操作失败：',err);
}
};
papa.onmousemove=()=>{
clearTimeout(timerId);
btnFs.style.opacity='.95';
timerId=setTimeout(()=>{
btnFs.style.opacity="0";
},3000);
};
document.addEventListener("fullscreenchange",()=>{
if(document.fullscreenElement){
fs=true;
btnFs.innerText='退出全屏';
}else{
fs=false;
btnFs.innerText='全屏观赏';
}
});
setTimeout(mState,50);
setTimeout(createPinpu,100);
}
window.addEventListener('DOMContentLoaded',initPlayer);
})();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
let Timer;
const papa = document.getElementById('papa');
const button = papa.querySelector('button');
papa.addEventListener('mousemove',()=>{
clearTimeout(Timer);
button.style.opacity='1';
Timer=setTimeout(()=>{
button.style.opacity='0';
},3000);
});
</script>
</body>
</html>
这样滑移的歌词同步很奇妙。这首歌非常好听呢。
欣赏扬帆好帖{:4_187:} 很精美很有特点的制作，这首歌也很好听，欣赏点赞！！新春快乐~~{:4_204:}{:4_190:}
https://pic.rmb.bdstatic.com/bjh/news/03b17e59b0c60195338dc13b4de0fb22.gif 这移动歌词特别吸引人，歌曲好听。欣赏杨帆精彩制作。初十问好！{:4_187:} 感觉好美的制作，配的歌曲也好听{:5_116:} 红影 发表于 2026-2-25 23:24
这样滑移的歌词同步很奇妙。这首歌非常好听呢。
欣赏扬帆好帖
谢谢影子鼓励，祝马年大吉大利{:4_204:} 霜染枫丹 发表于 2026-2-26 00:08
很精美很有特点的制作，这首歌也很好听，欣赏点赞！！新春快乐~~
谢谢枫丹鼓励，祝马年大吉大利{:4_204:} 也曾年轻 发表于 2026-2-26 07:46
谢谢年轻老师鼓励，祝马年大吉大利{:4_190:} 梦江南 发表于 2026-2-26 09:13
这移动歌词特别吸引人，歌曲好听。欣赏杨帆精彩制作。初十问好！
谢谢江南鼓励，祝马年大吉大利{:4_204:} 凤舞九天 发表于 2026-2-26 12:47
感觉好美的制作，配的歌曲也好听
谢谢凤舞老师鼓励，欣赏您优美的歌声，祝马年大吉大利{:4_176:} 歌词同步很有创新！这歌在春晚上我就迷上了，可是这歌要唱好太难的了。 未知名 发表于 2026-2-27 14:07
歌词同步很有创新！这歌在春晚上我就迷上了，可是这歌要唱好太难的了。
谢谢未知名朋友鼓励，自己唱开心就好呀，祝马年大吉大利{:4_176:} 很漂亮啊，歌词有特色 走过岁月 发表于 2026-2-28 11:23
很漂亮啊，歌词有特色
谢谢岁月版主鼓励，祝兄弟元宵节快乐{:4_191:}
页:
[1]