小辣椒 发表于 2026-4-4 12:15

陪月亮不孤单 歌手：龙梅子

<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

#hWindow         {
                width:1280px;
                height:680px;
                bbbackground-image:url(https://wj.zp68.com/lxx/yunhua/2026/03/29/13.jpg);
                bbbackground-size:cover;
                background-color:#255258;
                box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 6px #044750;
                position: relative;
                margin: 130px 0 20px calc(50% - 721px);
                overflow:hidden;
                border-radius:0px;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
        }
        #curp        {
                width: 100%;
                height:100%;
                background-image:url(https://wj.zp68.com/lxx/yunhua/2026/03/29/13.jpg);box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #880000;
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;
                  animation: hue-rotate 0.5s linear infinite ;
        }
       
        .stop #curp{animation-play-state: paused;}
@keyframes hue-rotate {
to {
   filter: hue-rotate(360deg);
}
}
#LRCShow{position:absolute;left:22%;bottom:30px;width:100%;height:100px;font-size:2.8em;    font-weight: 200;}
.lyricDisp{ transition:.3s all ease;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;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:300ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(90deg, #Ff0000,#800000 ,#00aa00 ,#000080 ,#ff0000 ,#00aa00 ,#000080 ,#ff0000,#00aa00 ,#000080 ,#ff0000);-webkit-background-clip: text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}

#rdisk{position:absolute;left:28px;bottom:10px;border-radius: 50%;
width:80px;height:80px;border: 2px solid #000000;
        background: url('https://wj.zp68.com/lxx/yunhua/2026/03/29/012.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 1px,#red 0);-webkit-mask: radial-gradient(transparent 1px,red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);
color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}


        #fullscreen{border-radius: 4px;position: absolute;
color:#ccc;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 25px;font-weight: 100;
border: none;
cursor: pointer;top: 16px;left: 4%;
}

</style>

<div id="hWindow">
        <div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="tetimg" ><div id="curp"></div></div>
    <div id="rdisk" ></div>

    <div id="LRCShow" >
            <div class="lyricDisp">陪月亮不孤单</div><div class="lyricDisp"></div>
         
    </div>
</div>


<textarea id="lrc_content" style="visibility: hidden;">
陪月亮不孤单
歌手：龙梅子   
LRC编辑：小辣椒
让寒冷绽放你的笑颜
它怎能锁住你的心愿
云飘过大雪落满山谷
我在夜里
仿佛看见了春天
任风声吞没我的背影
也不能遮断我的呼唤
像春蚕吐丝无尽思念
天亮之前留给地平线
让冬天记住雪的浪漫
让寒冷告诉你
什么是温暖
用雪的冷艳蚕的缠绵
借我这一生
给未来个春天
电视剧《女人的抗战》的主题曲
任风声吞没我的背影
也不能遮断我的呼唤
像春蚕吐丝无尽思念
天亮之前留给地平线
让冬天记住雪的浪漫
让寒冷告诉你
什么是温暖
用雪的冷艳蚕的缠绵
借我这一生
给未来个春天
让寂寞记住蚕的缠绵
让执着告诉你
什么是永远
看悠悠绿水蓝蓝的天
用我这颗心
陪月亮不孤单
用我这颗心
陪月亮不孤单
谢谢欣赏



</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div'); this.imagee=document.getElementById('tetimg');
this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){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;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';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(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)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play();aniObj.play();that.imagee.classList.remove('stop')}else{that.mObj.pause();aniObj.pause();that.imagee.classList.add('stop')}};try{this.mObj.play()}catch(err){console.log(err.message)}}}





let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
               hWindow.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>

<script type="text/javascript">
var imgSet =[
"https://wj.zp68.com/lxx/yunhua/2026/03/29/1.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/2.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/3.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/4.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/5.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/6.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/7.jpg",
"https://wj.zp68.com/lxx/yunhua/2026/03/29/8.jpg"
];
var keyFrames =
        [
       
       {opacity:'1',transform:'translate(-100%,-100%)scale(0)',offset:0},
       
       {opacity:'1',transform:'translate(0%,0%)scale(0.7)rotate(-360deg)',offset:0.20},
       {opacity:'1',transform: 'perspective(2000px) rotateY(80deg)scale(0.7)',offset:0.35},
       {opacity:'1',transform: 'perspective(2000px) rotateY(-80deg)scale(0.7)',offset:0.55},
       {opacity:'1',transform:'translate(100%,100%) perspective(2000px)rotatex(180deg) rotateY(-70deg)scale(1)',offset:0.70}

       
];

var EffectTiming = {duration: 8000, fill: 'forwards'};

var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;

        function initTrun()        {
                imgBlock = document.getElementById('hWindow');
                curp = document.getElementById('curp');
               
                aniObj = curp.animate(keyFrames, EffectTiming);
                aniObj.pause();
                aniObj.onfinish = chg_cur_pic;
                chg_cur_pic();        //my_audio.play();
        }

        function chg_cur_pic()        {       
                imgBlock.style.backgroundSize = "cover";
                imgBlock.style.backgroundImage = "url(" + imgSet + ")";
        curp.style.backgroundImage = "url(" + imgSet + ")";
               
                lastIdx = imgIdx;
                imgIdx++;
                imgIdx %= imgSet.length;
                aniObj.play();
               
        }
       
        initTrun();

        var opts = {
                        //        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://wj.zp68.com/lxx/yunhua/2026/03/29/01.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);

</script>

小辣椒 发表于 2026-4-4 12:16

亚纶的代码套用玩一个 感谢亚纶的源码分享

小辣椒 发表于 2026-4-4 12:16

{:5_150:}{:5_143:}{:5_150:}

小辣椒 发表于 2026-4-4 12:19

《陪月亮不孤单》是龙梅子演唱的一首歌曲，作为电视剧《女人的抗战》的主题曲，传递了陪伴与希望的情感。

这个高清视频我分享过，以前的连接失效了，后悔当初没有下载，后面找的不是高清的了，logo太多，我就不分享视频，做了这个帖

liumang 发表于 2026-4-5 01:12

亚纶老师的代码制作有水平的{:5_150:}{:5_150:}{:5_150:}
页: [1]
查看完整版本: 陪月亮不孤单 歌手：龙梅子