红红火火过大年

杨帆发表于 2026-2-7 14:48

本帖最后由杨帆于 2026-2-7 15:18 编辑 <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 {position:relative;width:1280px;height:780px;background:url('') no-repeat center/cover;box-shadow:2px 2px 6px #000;z-index:1;margin:80px 0 50px calc(50% - 721px);overflow:hidden;border-radius:25px;--state:running;}
#Player {position: absolute;top:25px;left:25px;font-size:clamp(4em, 6em, 8em);color: red;cursor: pointer;font-family: 隶书;z-index: 10;text-shadow: 3px 3px 15px gold;animation: fu-rotate 8s infinite linear var(--state);transform-origin: center;opacity: .9;}
#Player:hover{--state:paused;filter:hue-rotate(30deg) drop-shadow(1px 0 0 #FFD700 ) drop-shadow( 0 1px 0 #FFD700) drop-shadow(-1px 0 0 #FFD700 ) drop-shadow( 0 -1px0 #FFD700);}
@keyframes fu-rotate {0% { transform: rotate(0deg) scale(1); }50% { transform: rotate(180deg) scale(1.2); }100% { transform: rotate(360deg) scale(1); }}
#vid1,#vid2 {position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;object-position:center;mix-blend-mode:hard-light;}
#vid1{opacity:1;}
#vid2{opacity:.5;}
@keyframes rot {to{transform:rotate(var(--deg));}}
.dancer {position:absolute;mix-blend-mode: screen;z-index:1;}
#dancer {position:absolute;width:180px;height:180px;cursor:pointer;--display:block;display:var(--display);z-index:10;}
#dancer:hover{brightness(2);transition:.3s;}
.lrcShow{font:normal 2.5rem "Ma Shan Zheng","SimHei",cursive;position:absolute;bottom:86%;left:38%;color:transparent;filter:drop-shadow(1px 2px 1px Lavender);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;z-index:999;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:Lavender;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
#fullscreen {position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:18;}
#fullscreen:hover {font-style:italic;}
#tmsg {position:absolute;z-index:10;font:normal 18px sans-serif;color:#1a73e8;top:4.5%;right:25.5%;--display:block;display:var(--display);}
</style>
<div id="papa">
<div id="Player">福</div>
<img class="dancer" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" alt="" style="left:0px;top:88%;width:100%;height:120px;margin-bottom:-10px">
<img id="dancer" src="https://bbs.cnzv.cc/up/upload/pic/12/20250128-f68fd0f8757c421897f3c612ed4dadf5.jpg" alt="" style="left:-15px;top:120px" >
<video id="vid1" src="https://upfile.mp3.wf/view.php/306ed1ea9f4b8fa690740aad93e7b11c.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/02/06/5b503d6c75c2a.mp4" autoplay loop muted></video>
<span id="fullscreen">全屏欣赏</span>
<div id="tmsg">00:00|00:00</div>
<div class="lrcShow" data-lrc="红红火火过大年">红红火火过大年</div>
</div>
<script>
function lrcPlayerY(opts){
this.init(opts);
}
lrcPlayerY.prototype={
constructor:lrcPlayerY,
init:function(opts){
var lrcTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');
this.lrcShowObj=document.querySelector('.lrcShow');
this.lrcs=this.handleLrc(lrcTxt);
this.lastTime=0;
this.genPlayer(opts.audioURL);
},
handleLrc:function(lrcTxt){
var parts=lrcTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);
var lrcVec=new Array();
for(var l=0;l<parts.length;l++){
var times=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
if(times){
var idx=parts.lastIndexOf(']');
if(idx>0)var lyric=parts.substr(idx+1);
for(var m=0;m<times.length;m++){
var time=times.substr(1).replace(']','').split(':');
var seconds=(+time)*60+(+time);
if(lrcVec.length==0&&seconds!=0){
lrcVec.push({f:0,G:''});
}
lrcVec.push({f:+seconds.toFixed(2),G:lyric});
}
}
}
lrcVec.sort(function(a,b){
return(a.f-b.f);
});
for(var k=0;k<lrcVec.length-1;k++){
lrcVec.K=+(lrcVec.f-lrcVec.f).toFixed(2);
}
console.log(lrcVec);
return lrcVec;
},
showLrc:function(dur){
this.lrcShowObj.dataset.lrc=this.lrcs.G;
this.lrcShowObj.style.setProperty('--aniPlayState','paused');
void this.lrcShowObj.offsetHeight;
this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));
this.lrcShowObj.style.setProperty('--durTime',dur+'s');
this.lrcShowObj.style.setProperty('--aniPlayState','running');
this.idx++;
},
genPlayer:function(audioURL){
this.mObj=document.createElement("audio");
this.mObj.muted=false;
this.mObj.autoplay=true;
this.mObj.loop=true;
this.mObj.src=audioURL;
this.lrcShowObj.appendChild(this.mObj);
var that=this;
var chkTime=0;
this.idx=0;
this.mObj.addEventListener('ended',function(){
that.idx=0;
that.mObj.pause();
document.getElementById('vid1').pause();
document.getElementById('vid2').pause();
});
this.mObj.addEventListener('canplay',function(){
that.lrcs.K=+(that.mObj.duration-that.lrcs.f).toFixed(2);
});
this.mObj.addEventListener('pause',function(){
that.lrcShowObj.style.setProperty('--aniPlayState','paused');
document.getElementById('vid1').pause();
document.getElementById('vid2').pause();
});
this.mObj.addEventListener('play',function(){
that.lrcShowObj.style.animation='none';
that.lrcShowObj.offsetHeight;
that.lrcShowObj.style.animation=null;
that.lrcShowObj.style.setProperty('--aniPlayState','running');
document.getElementById('vid1').play();
document.getElementById('vid2').play();
});
this.mObj.addEventListener('error',function(){
console.log("audio error, please check url and network");
that.lrcShowObj.style.display='none';
that.lrcShowObj.removeChild(that.mObj);
});
this.mObj.addEventListener('timeupdate',function(){
if(this.currentTime<that.lastTime-1){
that.idx=0;
}
that.lastTime=this.currentTime;
if(that.idx<that.lrcs.length){
if(this.currentTime>=that.lrcs.f){
that.showLrc(that.lrcs.K);
}
}
});
}
};
let lrctxt=`
作词：赵志阳
过了腊八呀就是年
噼噼啪啪每一天
普天之下风月无边
神州处处有欢颜
风风火火的秧歌队
演绎的人物让人醉
织女牛郎就在眼前相会
梁祝起舞还是那么凄美
唐僧师徒跨越时空
最有活力的是孙悟空
八仙联手大显神通
玉帝和王母大驾光临
君明母仪造福人群
所有的年货已经就位
这越来越浓的年味
就像老酒开了瓶嘴
期待年夜那一份心醉
大红灯笼挂起来
闪光的对联贴起来
开心的舞蹈跳起来
点燃鞭炮响彻天
红红火火过大年
过了腊八呀就是年
噼噼啪啪每一天
普天之下风月无边
神州处处有欢颜
风风火火的秧歌队
演绎的人物让人醉
织女牛郎就在眼前相会
梁祝起舞还是那么凄美
唐僧师徒跨越时空
最有活力的是孙悟空
八仙联手大显神通
玉帝和王母大驾光临
君明母仪造福人群
所有的年货已经就位
这越来越浓的年味
就像老酒开了瓶嘴
期待年夜那一份心醉
大红灯笼挂起来
闪光的对联贴起来
开心的舞蹈跳起来
点燃鞭炮响彻天
红红火火过大年

`;
let opts={
lrcTxt:lrctxt,
audioURL:"https://upfile.mp3.wf/view.php/6d46b347a384d7098e177a5fe6cb958e.mp3"
};
let yP=new lrcPlayerY(opts);
var dancers=document.querySelectorAll('.dancer');
var mState=()=>{
papa.style.setProperty('--state',yP.mObj.paused?'paused':'running');
Player.title=yP.mObj.paused?'播放':'暂停';
dancer.title=yP.mObj.paused?'播放':'暂停';

dancers.forEach(dancer=>dancer.style.setProperty('opacity', yP.mObj.paused? '0' : '1'));
dancer.style.setProperty('--display', yP.mObj.paused? 'none' : 'block');
tmsg.style.setProperty('--display', yP.mObj.paused? 'none' : 'block');
};
Player.onclick=()=>{
yP.mObj.paused?(yP.mObj.play()):(yP.mObj.pause());
};
yP.mObj.onplaying=yP.mObj.onpause=()=>mState();
this.dancer.addEventListener('click',function(){
if(yP.mObj.paused){
yP.mObj.play();
}else{
yP.mObj.pause();
}
});
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);
});
yP.mObj.addEventListener('timeupdate',()=>{
tmsg.innerText=toMin(yP.mObj.currentTime)+' | '+toMin(yP.mObj.duration);
});
function toMin(val){
if(!val)return'00:00';
val=Math.floor(val);
let min=parseInt(val/60);
let sec=val%60;
if(min<10)min='0'+min;
if(sec<10)sec='0'+sec;
return min+':'+sec;
};
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>

也曾年轻 发表于 2026-2-7 15:03

再添把火{:5_106:}https://img.mp.sohu.com/upload/20170803/fde88dd1da4548adba71c70591810672.png

梦江南 发表于 2026-2-7 15:34

年味浓起来了！欣赏杨帆的精彩音画。{:4_187:}

杨帆发表于 2026-2-7 16:00

也曾年轻发表于 2026-2-7 15:03
再添把火

呵呵，祝老师马年大吉，火火火{:4_180:}

杨帆发表于 2026-2-7 16:01

梦江南发表于 2026-2-7 15:34
年味浓起来了！欣赏杨帆的精彩音画。

问好江南，祝马年大吉、幸福安康{:4_204:}

梦油发表于 2026-2-7 16:41

还有一个礼拜就过年了，时间过得真快。

杨帆发表于 2026-2-7 17:58

梦油发表于 2026-2-7 16:41
还有一个礼拜就过年了，时间过得真快。

是啊，祝梦兄马年大吉、红红火火

梦油发表于 2026-2-7 19:36

杨帆发表于 2026-2-7 17:58
是啊，祝梦兄马年大吉、红红火火

谢谢杨帆朋友的美好祝福。祝你开心快乐！

红影发表于 2026-2-7 21:22

这么热烈的氛围，歌曲也很喜庆，这个帖子真好。
大家一起红红火火过大年{:4_177:}

马黑黑 发表于 2026-2-8 20:13

喜庆

杨帆发表于 2026-2-8 20:56

红影发表于 2026-2-7 21:22
这么热烈的氛围，歌曲也很喜庆，这个帖子真好。
大家一起红红火火过大年

问好影子，红红火火过大年{:4_204:}

杨帆发表于 2026-2-8 20:58

马黑黑发表于 2026-2-8 20:13
喜庆

谢谢鼓励，祝福马老师马年大吉、阖家欢乐、安康幸福{:4_176:}

页: [1]

花潮论坛's Archiver

红红火火过大年