论坛 › 动画音画 › 故乡的风来了又走

亚伦影音工作室 发表于 2026-3-15 11:06

故乡的风来了又走

本帖最后由 亚伦影音工作室 于 2026-3-15 18:40 编辑 <br /><br />   
    <style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 10px -300px;width: 1164px;height: 620px;background: url(https://pic1.imgdb.cn/item/693402b4b20847ff2b5dfb4a.jpg)no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#tu{position: absolute;top:0%; left:0%;
      width: 100%;background:url(https://pic1.imgdb.cn/item/693402b4b20847ff2b5dfb4a.jpg) no-repeat center/cover;
      height: 100%;animation: round 6s linear infinite; height: 100%;}

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}

100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
.stop #tu{animation-play-state: paused;}


#zs{position: absolute;top:2%; left:94%;width: 25px;height: 25px;}

#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }

.lyricDisp{transition:.3s all ease;text-align:center;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);line-height: 50px;--bg:linear-gradient(90deg, #e56420, #ff0000, #000, #800000, #ff0000)}
.lyricDisp:first-child{font-size:1.5em;color:#00aa00;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:10%;height:100%;color:transparent;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);background: var(--bg);-webkit-background-clip: text;text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:40%;top: 25%;width:53%;font-weight:390;font-size:1.8em;}

#player {position:absolute;top: 62%;z-index: 99;
            left: 78%;
width: 160px;
height: 160px;
display: grid;cursor:pointer;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}

#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
.stop #player{animation-play-state: paused;}
</style>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.player=document.getElementById('player');this.image=document.getElementById('testImg');this.imagee=document.getElementById('tetimg');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==1&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.player.onclick=function(){if(that.mObj.paused){that.mObj.play();that.image.classList.remove('stop');that.imagee.classList.remove('stop')}else{that.mObj.pause();that.image.classList.add('stop');that.imagee.classList.add('stop')}};      try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}

</script>

<!------ 以下为定制部分        ---->
<divid="papa" >
<div id="tetimg" ><div id='tu'></div>
<div class="LRCShow"></div>
<div id="testImg" >
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<divid="zs"onclick="btnClick()"title="全屏展示/退出全屏" ><div id="全屏"></div>
<div id="退出" ></div>
</div>

<script type="text/javascript">
let lrctxt = `
故乡的风来了又走
作词：范贵宾/三木/曲多美
作曲：任夏
演唱：杨不乖
酒杯酒杯别笑我
你又不懂我难过
他乡的夜晚怎能不寂寞
心里话无人诉说
这半生不停奔波
想问自己图什么
看着城市万家的灯火
却没一盏属于我
故乡的风 来了又走
思念的泪 吹干又流
当初背井离乡 为生活而奔走
到头输了生活 丢了自由
故乡的风 来了又走
我的心里 满是乡愁
奈何时光匆匆 岁月染白了头
半生已过还在四处漂流
出品:亚伦影音工作室
酒杯酒杯别笑我
你又不懂我难过
他乡的夜晚怎能不寂寞
心里话无人诉说
这半生不停奔波
想问自己图什么
看着城市万家的灯火
却没一盏属于我
故乡的风 来了又走
思念的泪 吹干又流
当初背井离乡 为生活而奔走
到头输了生活 丢了自由
故乡的风 来了又走
我的心里 满是乡愁
奈何时光匆匆 岁月染白了头
半生已过还在四处漂流
故乡的风 来了又走
思念的泪 吹干又流
当初背井离乡 为生活而奔走
到头输了生活 丢了自由
故乡的风 来了又走
我的心里 满是乡愁
奈何时光匆匆 岁月染白了头
半生已过还在四处漂流
谢谢欣赏
`;
var opts = {
        lrcDoc:lrctxt,                //        存放lrc歌词的变量名
        audioURL:"https://s2.cldisk.com/sv-w7/audio/70/3f/6d/7cd221ef9671506e58ae1c322bea793b/audio.mp3",        //        歌曲链接
        showLines:6                                //        显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
<script>


function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
               
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";

zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               papa.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                papa.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }
            }
      }

      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }

      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }
</script>

老谟深虑 发表于 2026-3-15 12:30

         欣赏老师的精美音画。学习了！

杨帆 发表于 2026-3-15 13:19

好听好看，谢谢亚伦老师精彩分享{:4_180:}

查看完整版本: 故乡的风来了又走