杨帆 发表于 2025-12-30 20:13

喜迎2026元旦，祝福各位朋友新年快乐~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>喜迎2026元旦</title>
</head>
<body>
<style>
#pa{margin:30px auto;position:relative;display:grid;place-items:center;width:1280px;height:780px;left: calc(50% - 81px);transform: translateX(-50%);border:1px solid gray;overflow:hidden;background:url('https://pic.imgdb.cn/item/65bba435871b83018a4e2002.jpg') no-repeat center/cover;z-index:1;user-drag:none;user-select:none;--state:running;}
#wrapper{position:absolute;padding:0px;color:#00aa00;font:normal 2.5em 华文隶书;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);text-align:center;top:85%;z-index:9;writing-mode:horizontal-tb;}
.vertical-lrc{writing-mode:vertical-lr !important;top:60% !important;left:8% !important;transform:translate(-50%, -50%);height:80% !important;width:auto !important;}
#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(360deg);filter:hue-rotate(90deg);}}
#mdiv:hover{filter:unset !important;}
#fullscreen{position:absolute;bottom:30px;left:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:10;}
#fullscreen:hover{font-style:italic;}
.vid{position:absolute;left:10%;top:10%;width:60%;height:70%;border-radius:50%;box-shadow:2px 2px 8px rgba(0,0,0,.8) inset;mix-blend-mode:screen;pointer-events:none;opacity:.8;transition:1s;z-index:5;object-fit:cover;mask:radial-gradient(red 50%,transparent 60.5%,transparent 0);-webkit-mask:radial-gradient(red 50%,transparent 60.5%,transparent 0);opacity:.9;}
#vid1{position:absolute;inset:0;left:-20%;top:-20%;width:160%;height:160%;object-fit:cover;pointer-events:none;opacity:.9;mix-blend-mode:screen;object-position:center;}
.char{display:inline-block;padding:2px 2px;opacity:0;color:#00aa00;transform:translate(var(--x), var(--y));animation:fadeIn 1.5s var(--delay) forwards var(--state),flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:scale(1);opacity:1;}}
@keyframes flash{to{filter:hue-rotate(360deg) brightness(60%);}}
#pa:hover #he,#pa:hover #prev-song,#pa:hover #next-song{opacity:1;z-index:10;}
#he:hover,#prev-song:hover,#next-song:hover{scale:1.05;translate:-1px 1px;}
#he{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;left:85%;z-index:10;transition:transform 0.3s;opacity:0;}
#prev-song,#next-song{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;z-index:10;transition:transform 0.3s;opacity:0;}
#prev-song{left:78%;}
#next-song{left:92%;}
#play-status{position:absolute;top:30px;left:50px;color:#ffffff;font:normal 1.5em 华文隶书;filter:drop-shadow(0 0 5px #ff0000);z-index:10;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.status-item{display:flex;align-items:center;gap:10px;}
.status-label{color:#ffff00;}
.status-value{color:#00ff9d;}
</style>
<div id="pa">
<audio id="aud" loop></audio>
<span id="fullscreen">全屏欣赏</span>
<div id="mdiv" title='暂停';>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>   
<video class="vid" src="https://img.tukuppt.com/video_show/10/10/07/9/68eda79776490.mp4" autoplay loop muted=""></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/01/07/99/617133cf9de14.mp4" autoplay loop muted=""></video>
<div id="play-status">
    <div class="status-item">
      <span class="status-label">播放状态：</span>
      <span class="status-value" id="play-state">播放中</span>
    </div>
    <div class="status-item">
      <span class="status-label">当前歌曲：</span>
      <span class="status-value" id="song-name">好运来 - 祖海</span>
    </div>
    <div class="status-item">
      <span class="status-label">播放进度：</span>
      <span class="status-value" id="play-progress">00:00 / 03:25</span>
    </div>
    <div class="status-item">
      <span class="status-label">歌曲列表：</span>
      <span class="status-value" id="song-index">1/2</span>
    </div>
</div>
<div id="wrapper">好运来 - 祖海</div>
<div>
    <span id="prev-song" onclick="changeSong(-1)" title="">上一首</span>
    <span id="he" onclick="toggleLrcDirection()" title="">竖排歌词</span>
    <span id="next-song" onclick="changeSong(1)" title="">下一首</span>
</div>
</div>
<script>
const songList=[
{
name:"好运来",
src:"https://www.joy127.com/url/139637.mp3",
lrc:`
好运来 - 祖海
词:车行
曲:戚建波
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
叠个千纸鹤再系个红飘带
愿善良的人们天天好运来
你勤劳生活美你健康春常在
你一生的忙碌为了笑逐颜开
打个中国结请春风剪个彩
愿祖国的日月年年好运来
你凤舞太平年你龙腾新时代
你幸福的家园迎来百花盛开
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
叠个千纸鹤再系个红飘带
愿善良的人们天天好运来
你勤劳生活美你健康春常在
你一生的忙碌为了笑逐颜开
打个中国结请春风剪个彩
愿祖国的日月年年好运来
你凤舞太平年你龙腾新时代
你幸福的家园迎来百花盛开
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
通 四 海 好运来`
},
{
name:"2026 我们一起发大财",
src:"https://www.joy127.com/url/139404.mp3",
lrc:`
2026 我们一起发大财
演唱：红蔷薇
作词：何秋苹
作曲：何秋苹
编曲：彭锐
后期：拙啼
监制：李启榕
出品：何秋苹/李启榕
发行：
赣州禾声文化传媒有限公司
春风送暖百花儿开
迎春花开富贵来
走进美好的2026 年
满怀期待心潮澎湃
所有的不如意都走开
新的一年带着好运来
一顺百顺大家都赚钱
新的一年努力向前迈
2026 我们一起发大财
顺风顺水财源滚滚来
八方来财金钱装满袋
盆满钵满乐呀乐开怀
2026 我们一起发大财
生意兴隆通四海
人人都买车买豪宅
红火的日子越过越精彩
所有的不如意都走开
新的一年带着好运来
一顺百顺大家都赚钱
新的一年努力向前迈
2026 我们一起发大财
顺风顺水财源滚滚来
八方来财金钱装满袋
盆满钵满乐呀乐开怀
2026 我们一起发大财
生意兴隆通四海
人人都买车买豪宅
红火的日子越过越精彩
2026 我们一起发大财
顺风顺水财源滚滚来
八方来财金钱装满袋
盆满钵满乐呀乐开怀
2026 我们一起发大财
生意兴隆通四海
人人都买车买豪宅
红火的日子越过越精彩
红火的日子越过越精彩 `
},
{
name: "美丽中国",
src: "https://upfile.mp3.wf/view.php/b30dbae65e10dfb8b7efc9271f51563f.mp3",
lrc: `           
美丽中国 - 陈思思
词：孟文豪
曲：孟文豪
壮美的北国
青山绿水如此辽阔
蓝天上白云朵朵
每寸土地都是爱的寄托
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
秀丽的南国
绿树红花如此婀娜
南湖上荡起碧波
每个孩子都唱起欢歌
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
我的话要对你诉说
我最美丽的祖国`
},
{
name:"春风十里报新年",
src:"https://bbs.cnzv.cc/mp3/MTQxMzQ2NDkwMiZ3eW1wMw==.mp3",
lrc:`
春风十里报新年
作词：接个吻，开一枪、王东旭、Lambert
作曲：接个吻，开一枪
编曲：接个吻，开一枪
早上光照在房间
穿上新衬衫
镜子里我又长高了些
和同学吃火锅
然后开黑带妹
一起狼人杀不用上学
就不累
发条祝福传给你
请你别忘记
今年我们还要看流星
年初的愿望你都实现了吗
喜欢的男孩你都追到了吗
回家陪妈妈一块包个饺子
包个饺子
回家陪奶奶一块看个电视
看个电视
和弟弟放个烟花
让城市回忆留下
七大姑八大姨
你们的红包在哪
春风吹十里 莺啼报新年
爆竹声声起 好运又一年
走过一片时间海
只为遇见对的爱
烟花聚又散 今夜共团圆
莺啼报新年 春风吹十里
今夜共团圆
早上光照在房间
穿上新衬衫
镜子里我又长高了些
和同学吃火锅然后开黑带妹
一起狼人杀不用上学就不累
发条祝福传给你 请你别忘记
今年我们还要看流星
年初的愿望你都实现了吗
喜欢的男孩你都追到了吗
回家陪妈妈一块包个饺子
包个饺子
晚上陪奶奶一块看个电视
看个电视
和弟弟放个烟花
让城市回忆留下
七大姑八大姨
你们的红包在哪
春风吹十里 莺啼报新年
爆竹声声起 好运又一年
走过一片时间海
只为遇见对的爱
烟花聚又散 今夜共团圆
莺啼报新年 春风吹十里
莺啼报新年
新的一年迎接全新的自己
红纸上我提起笔重游
一遍四季
想和baby你整天腻在一起
享受节日散发出的气息
又过一年光景
为了见到你 我翻山越岭
带着你回家见爸爸妈妈耶
合家团圆一起看联欢晚会
万事如意大吉大利耶
恭喜发财五福给你耶
合家团圆笑口常开耶
好运连连红包拿来耶
万事如意大吉大利耶
恭喜发财五福给你耶`
},
{
name:"喜乐年华",
src:"https://www.joy127.com/url/140756.mp3",
lrc:`
陈红 - 喜乐年华
过上了好日子红红火火
赶上了好时代喜乐年华
你看那山捧金水流银呀
春夏秋冬里大地开花
那个喜呀那个乐呀
那个敲呀那个打
那个喜呀那个乐呀
那个敲呀那个打
逢盛世祝太平红红火火
春常在风雨顺喜乐年华
你看那人风流心也潇洒
东西南北中彩虹高挂
那个喜呀那个乐呀
那个敲呀那个打
那个喜呀那个乐呀那个敲呀那个打
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
逢盛世祝太平红红火火
春常在风雨顺喜乐年华
你看那人风流心也潇洒
东西南北中彩虹高挂
那个喜呀那个乐呀那个敲呀那个打
那个喜呀那个乐呀那个敲呀那个打
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
啦
真真情情爱不够咱们大中华
大中华`
},
];
let currentSongIndex=0;
let gcAr=[];
let curkey=0,isSeeking=false;
let totalDuration=0;
const playStateEl=document.getElementById('play-state');
const playProgressEl=document.getElementById('play-progress');
const songNameEl=document.getElementById('song-name');
const songIndexEl=document.getElementById('song-index');
const wrapper=document.getElementById('wrapper');
const heBtn=document.getElementById('he');
function formatTime(seconds){
const mins=Math.floor(seconds/60).toString().padStart(2,'0');
const secs=Math.floor(seconds%60).toString().padStart(2,'0');
return `${mins}:${secs}`;
}
function changeSong(direction){
currentSongIndex+=direction;
if(currentSongIndex<0){
currentSongIndex=songList.length-1;
}else if(currentSongIndex>=songList.length){
currentSongIndex=0;
}
loadSong(currentSongIndex);
}
function loadSong(index){
const song=songList;
aud.src=song.src;
gcAr=lrc2HC(song.lrc);
curkey=0;
songNameEl.textContent=song.name;
songIndexEl.textContent=`${index+1}/${songList.length}`;
playProgressEl.textContent=`00:00 / 00:00`;
playStateEl.textContent='播放中';
aud.play();
mdiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
wrapper.innerHTML='';
wrapper.classList.remove('vertical-lrc');
heBtn.innerText='竖排歌词';
}
loadSong(0);
aud.onloadedmetadata=function(){
totalDuration=aud.duration;
playProgressEl.textContent=`00:00 / ${formatTime(totalDuration)}`;
};
aud.ontimeupdate=()=>{
if(curkey>gcAr.length-1)return;
if(aud.currentTime>=gcAr){
const gap=gcAr?.??0-gcAr;
showLrc(gcAr,wrapper,gap);
}
if(totalDuration){
playProgressEl.textContent=`${formatTime(aud.currentTime)} / ${formatTime(totalDuration)}`;
}
};
aud.onended=()=>{
changeSong(1);
}
aud.onseeked=()=>calcKey();
function lrc2HC(text){
let lrcAr=[];
let ar=text.trim().split('\n');
ar.sort();
let reg=/\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item=>{
if(reg.test(item)){
let result=item.match(reg);
let tmsg=parseInt(result)*60+parseInt(result)+parseInt(result)/1000;
lrcAr.push(.trim()]);
}
});
return lrcAr?lrcAr:;
};
function calcKey(){
for(let j=0;j<gcAr.length;j++){
if(aud.currentTime<=gcAr){
curkey=j-1;
break;
}
}
if(curkey<0)curkey=0;
if(curkey>gcAr.length-1)curkey=gcAr.length-1;
let time=gcAr?.??0-gcAr;
isSeeking=false;
showLrc(gcAr,wrapper,time);
}
function showLrc(str,targetElm,time){
if(isSeeking)return;
targetElm.innerHTML='';
const chars=str.split('').map(c=>c===' '?' ':c);
const frg=document.createDocumentFragment();
chars.forEach((char,idx)=>{
const span=document.createElement('span');
span.innerHTML=char;
span.classList.add('char');
const x=Math.random()*(Math.random()>0.5?-300:300);
const y=Math.random()*(Math.random()>0.5?-300:300);
span.style.cssText+=`
color:hsl(${Math.floor(Math.random()*360)},100%,50%);
--x:${x}px;
--y:${y}px;
--delay:${Math.random()*0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
setTimeout(()=>isSeeking=false,time);
}
let isVertical=false;
function toggleLrcDirection(){
isVertical=!isVertical;
if(isVertical){
heBtn.innerText='横排歌词';
wrapper.classList.add('vertical-lrc');
}else{
heBtn.innerText='竖排歌词';
wrapper.classList.remove('vertical-lrc');
}
}
mdiv.onclick=()=>{
const vids=document.querySelectorAll(',.vid');
if(aud.paused){
aud.play();
vids.forEach(vid=>vid.play());
mdiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
playStateEl.textContent='播放中';
}else{
aud.pause();
vids.forEach(vid=>vid.pause());
mdiv.style.animationPlayState='paused';
pa.style.setProperty('--state','paused');
playStateEl.textContent='已暂停';
}
};
pa.style.setProperty('--state','running');
const fullscreenEl=document.getElementById('fullscreen');
let fs=true;
let fsTimer;
if(fullscreenEl){
fullscreenEl.onclick=()=>{
if(fs){
fullscreenEl.innerText='退出全屏';
if(pa.requestFullscreen){pa.requestFullscreen();}
else if(pa.webkitRequestFullscreen){pa.webkitRequestFullscreen();}
else if(pa.msRequestFullscreen){pa.msRequestFullscreen();}
}else{
fullscreenEl.innerText='全屏欣赏';
if(document.exitFullscreen){document.exitFullscreen();}
else if(document.webkitExitFullscreen){document.webkitExitFullscreen();}
else if(document.msExitFullscreen){document.msExitFullscreen();}
}
fs=!fs;
};
pa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreenEl.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreenEl.style.opacity='0';},3000);
});
document.addEventListener('fullscreenchange',()=>{
fs=!document.fullscreenElement;
fullscreenEl.innerText=fs?'全屏欣赏':'退出全屏';
});
}
</script>
</body>
</html>

马黑黑 发表于 2025-12-30 20:46

漂亮，喜庆。同祝大家！

霜染枫丹 发表于 2025-12-30 21:27

很细心的制作，欣赏赞佩！！

杨帆 发表于 2025-12-30 21:38

马黑黑 发表于 2025-12-30 20:46
漂亮，喜庆。同祝大家！

谢谢鼓励，祝福马老师元旦快乐、马年大吉{:4_176:}

杨帆 发表于 2025-12-30 21:39

霜染枫丹 发表于 2025-12-30 21:27
很细心的制作，欣赏赞佩！！

谢谢鼓励，祝福枫丹元旦快乐、马年大吉{:4_204:}

也曾年轻 发表于 2025-12-30 21:57

好喜庆的帖子

杨帆 发表于 2025-12-30 22:14

也曾年轻 发表于 2025-12-30 21:57
好喜庆的帖子
谢谢鼓励，祝福也曾年轻老师元旦快乐、马年大吉{:4_176:}

马黑黑 发表于 2025-12-30 22:16

杨帆 发表于 2025-12-30 21:38
谢谢鼓励，祝福马老师元旦快乐、马年大吉

{:4_191:}

红影 发表于 2025-12-30 23:42

很美好喜庆的帖子，感谢杨帆美好祝福{:4_187:}

樵歌 发表于 2025-12-31 07:22

喜庆的歌声喜庆的图图，一顾都那么鼓舞人心！
祝扬帆新年快乐！

雨季工作室 发表于 2025-12-31 11:13

欣赏赞！

杨帆 发表于 2026-1-1 15:34

红影 发表于 2025-12-30 23:42
很美好喜庆的帖子，感谢杨帆美好祝福

谢谢鼓励，祝福影子元旦快乐、马年大吉{:4_204:}

杨帆 发表于 2026-1-1 15:34

樵歌 发表于 2025-12-31 07:22
喜庆的歌声喜庆的图图，一顾都那么鼓舞人心！
祝扬帆新年快乐！

谢谢鼓励，祝福樵歌元旦快乐、马年大吉{:4_176:}

杨帆 发表于 2026-1-1 15:35

雨季工作室 发表于 2025-12-31 11:13
欣赏赞！

欢迎新朋友，祝福雨季工作室元旦快乐、马年大吉{:4_176:}

红影 发表于 2026-1-1 20:44

杨帆 发表于 2026-1-1 15:34
谢谢鼓励，祝福影子元旦快乐、马年大吉

谢谢杨帆，也祝你节日快乐，马年大吉{:4_204:}
页: [1]
查看完整版本: 喜迎2026元旦，祝福各位朋友新年快乐~