在家尽孝心 出门讲诚信
本帖最后由 杨帆 于 2026-1-29 18:10 编辑 <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:140px 0 48px calc(50% - 721px);overflow:hidden;border-radius:25px;user-drag:none;user-select:none;--state:running;}
#Player {position: absolute;top: 3%;left: 30px;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;z-index:1;}
#dancer {position:absolute;width:180px;height:180px;cursor:pointer;z-index:10;--state:running;}
#dancer:hover{filter:invert(1) brightness(2);transition:.3s;}
.lrcShow{font:normal 3rem "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://wimg.588ku.com/gif620/20/08/14/111f0219167bae503ea0514c3de76530.gif" alt="" style="left:0px;top:-20%;width:100%;">
<img id="dancer" src="https://cccimg.com/view.php/2972d0c51a1ac86b6283ee72d6ca2f4e.gif" alt="" style="left:40%;top:30%" />
<video id="vid1" src="https://video.shipin520.com/videos/17/36/71/b_KSyZ5ujXfz7R1567173671.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>
if('getContext' in document.createElement('canvas')){
HTMLImageElement.prototype.play=function(){
if(this.storeCanvas){
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas=null;
this.style.opacity='';
}
if(this.storeUrl){
this.src=this.storeUrl;
}
};
HTMLImageElement.prototype.stop=function(){
var canvas=document.createElement('canvas');
var width=this.width,height=this.height;
if(width&height){
if(!this.storeUrl){
this.storeUrl=this.src;
}
canvas.width=width;
canvas.height=height;
canvas.style.left=this.style.left;
canvas.style.top=this.style.top;
canvas.getContext('2d').drawImage(this,0,0,width,height);
try{
this.src=canvas.toDataURL("image/gif");
}catch(e){
this.removeAttribute('src');
canvas.style.position='absolute';
this.parentElement.insertBefore(canvas,this);
this.style.opacity='0';
this.storeCanvas=canvas;
}
}
};
}
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/fa4de4cb66d93e48a90c3a98f5f86b45.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=>yP.mObj.paused?dancer.stop():dancer.play());
dancer.style.setProperty=yP.mObj.paused?dancer.stop():dancer.play();
};
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;
}
</script>
</body>
</html>
很好看的特效音画，欣赏并学习，问好 https://pic.rmb.bdstatic.com/bjh/news/c1af251cdee68add17be6b6617c1e597.gif 能一键暂停的精美音画，欣赏学习！{:4_187:} 很好听的歌，制作的很漂亮。加了前景元素灵动了很多。欣赏赞佩，晚上好！{:4_204:}{:4_190:}
姚云裳 发表于 2026-1-29 19:00
很好看的特效音画，欣赏并学习，问好
问好云裳，谢谢鼓励，祝开心{:4_204:} 梦江南 发表于 2026-1-29 19:50
能一键暂停的精美音画，欣赏学习！
问好江南，谢谢鼓励，祝开心{:4_204:} 霜染枫丹 发表于 2026-1-29 21:55
很好听的歌，制作的很漂亮。加了前景元素灵动了很多。欣赏赞佩，晚上好！
问好枫丹，我也是刚听到，谢谢鼓励{:4_204:} 也曾年轻 发表于 2026-1-29 19:08
谢谢老师鼓励，祝开心{:4_180:} 歌曲很正能量，特效漂亮，有两个小播按钮都能操控呢。
欣赏杨帆好帖{:4_187:} 红影 发表于 2026-1-29 23:58
歌曲很正能量，特效漂亮，有两个小播按钮都能操控呢。
欣赏杨帆好帖
是，歌词挺好，谢谢影子鼓励{:4_204:} 杨帆 发表于 2026-1-30 00:00
是，歌词挺好，谢谢影子鼓励
杨帆那么晚还在啊，昨天我回完一看时间不对，就直接下了，没想到你那么晚还在。
宣扬正能量的帖子，很赞{:4_199:} 红影 发表于 2026-1-30 09:06
杨帆那么晚还在啊，昨天我回完一看时间不对，就直接下了，没想到你那么晚还在。
宣扬正能量的帖子，很赞 ...
呵呵，劳逸结合，挺好{:4_171:} 杨帆 发表于 2026-1-30 13:44
呵呵，劳逸结合，挺好
嗯嗯，困了就睡，不设定时间之类的，倒也洒脱随意。
页:
[1]