醉美水芙蓉 发表于 2024-12-13 22:44:47

满天星斗不及你眼眸

<style type="text/css">
#outf        {width:1200px;height:620px;
        position:relative;overflow:hidden;
        border:brown 1px outset;}
#canv        {width:100%;Height:100%;opacity:0.4;position:absolute;top:0;left:0;z-index: 11;}
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--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(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:1px #800f00;text-align:center;font-size:2.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:15%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 11}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;z-index: 11}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
        #hWindow {width:1200px;
                height:620px;
                bbbackground-size:cover;
                background-color:#800000;font-size:18px;
                box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 6px #880000;
                position: relative;
                margin:20px-200px;
                overflow:hidden;
                border-radius:10px;z-index: 9;}
        #curp        {
                width: 100%;
                height:100%;
               
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;}
</style>
<div id="hWindow">
<div id="outf">
<canvas id="canv"></canvas></div>
        <div id="curp"></div>
    <div id="rdisk" style="width:100px;height:100px;border: 2px solid #000000;
        background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
    <div id="LRCShow" style="position:absolute;left:15%;bottom:50px;" >
            <div class="lyricDisp">《满天星斗不及你眼眸》DJ光年版</div><div class="lyricDisp"></div>
         </div>
</div>
<script type="text/javascript" >eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r=k;k=||e}];e=function(){return'(|1\\w)'};c=1};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p}('v m=[],o=[],p=,w=0;v f=0,F=0,r=30,a,4;v Q=7(e){b R=0.25*(G+c.l()*100);b k={H:5.5*(c.l()*6+3),n:I,d:e,9:-G,h:R,corlor:\'#eee\'};o.S(k)};7 T(x,y){b U={n:I,d:x,9:y,z:(c.l()-0.5)*8,A:c.l()*(-6)-3,V:c.l()*1.5+1};J U}7 K(x,y){b W=c.floor(c.l()*5+5);B(b i=0;i<W;i++){m.S(T(x,y))}}7 L(){b X=0.5,Y=35;g(m.M>0){m.C(7(e){e.z=e.z+(f/2);e.d=e.d+e.z;e.A=e.A+X;e.9=e.9+e.A;g(e.9>4.t){e.n=D}})}B(b j=m.M-1;j>=0;j--){g(m.n){m.Z(j,1)}}f=f+(F-f)/G;B(b i=0;i<r;i++){Q(c.l()*2*4.u-(0.5*4.u))}b 11=4.t-c.l()*4.t/5;o.C(7(e){b 12=c.sqrt(((e.d+f*e.h)-p)*((e.d+f*e.h)-p)+(e.9+e.h-p)*(e.9+e.h-p));g(12<Y){e.n=D;K(e.d+f*e.h,e.9+e.h)}g((e.9+e.h)>11){e.n=D;K(e.d+f*e.h,e.9+e.h)}g(e.9>=4.t){e.n=D}13{e.9=e.9+e.H;e.d=e.d+e.H*f}});B(b j=o.M-1;j>=0;j--){g(o.n){o.Z(j,1)}}14();w=15(L)}7 14(){a.16(0,0,4.u,4.N);a.17=1;o.C(7(k){a.18=k.color;a.19();a.moveTo(k.d,k.9);a.lineTo(k.d+k.h*f,k.9+k.h);a.1a()});a.17=0.5;a.18="#fff";m.C(7(e){a.19();a.arc(e.d,e.9,e.V,c.l()*c.PI*2,1*c.PI);a.1a()})}7 O(e){b x=e.1c,y=e.1d,s=e.1e;while(s!=null){x+=s.1c;y+=s.1d;s=s.1e}J{x,y}}window.oncontextmenu=7(e){J I};v rainBG=7(1f,1g){b q=1h.1i(1f);4=1h.1i(1g);a=4.getContext(\'2d\');4.u=4.P;4.N=4.t;q.E(\'mousemove\',7(e){p=e.1j-O(q).x;p=e.clientY-O(q).y;F=(e.1j-4.P/2)/(4.P/2)});q.E(\'mouseover\',7(){w=15(L)});q.E(\'mouseout\',7(){cancelAnimationFrame(w);a.16(0,0,4.u,4.N)});q.E(\'mousedown\',7(e){g(e.1k==0){g(r<55)r+=10}13 g(e.1k==2){g(r>5)r-=10}})}',[],83,'||||canv|||function||posy|ctx|let|Math|posx||speedx|if||||line|random|dropList|die|linelist|mousePos|outBlk|lineNum|pa|clientHeight|width|var|uID|||vx|vy|for|forEach|true|addEventListener|maxspeedx|50|speed|false|return|madedrops|update|length|height|offset|clientWidth|createLine|temp|push|createDrop|drop|radius|maxi|gravity|mouseDis|splice||endLine|dis|else|render|requestAnimationFrame|fillRect|lineWidth|strokeStyle|beginPath|stroke||offsetLeft|offsetTop|offsetParent|outfID|canvID|document|getElementById|clientX|button'.split('|'),0,{}));document.write(unescape("%3Cscript src='https://cdn.jsdelivr.autos/npm/jquery/dist/jquery.min.js'%3E%3C/script%3E"));</script>
<textarea id="lrc_content" style="visibility: hidden;">
满天星斗不及你眼眸-DJ光年版
作词：老树
作曲：郭白雪
演唱：石俊哲
混音：冯鑫阳
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.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()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>
<script type="text/javascript">
var imgSet = ["http://pan.yinhuabbs.cn/view.php/350daa82f5558bc7bdd0319e972af463.jpg",
"http://pan.yinhuabbs.cn/view.php/20ffe3aace1e694cebbacf65a7f704b2.jpg",
"http://pan.yinhuabbs.cn/view.php/9bf2ad251d123080c3b66e644af62719.jpg",
"http://pan.yinhuabbs.cn/view.php/d74cc7785856d93b2a9271934a6d18cf.jpg",
"http://pan.yinhuabbs.cn/view.php/c76995c29ee1d881a6cb4ced479c9400.jpg",
"http://pan.yinhuabbs.cn/view.php/3630d2bc6e068d9748600f0660fcfbe2.jpg",
"http://pan.yinhuabbs.cn/view.php/25e624c4aac7ae4c611c42b6ecf74826.jpg",
"http://pan.yinhuabbs.cn/view.php/89b8ebc09271b6d9552dfcc58ed80f67.jpg"];
var keyFrames = [{transform:'perspective(1000px) rotateY(-180deg)scale(.6)',filter:'hue-rotate(360deg)', opacity:'1'},
       {transform:'perspective(1000px)rotateY(0deg)scale(.6)', opacity:'1', offset:0.3},
{transform:'perspective(800px)rotateX(90deg)scale(.6)', opacity:'1', offset:0.5},
{transform:'perspective(800px)rotateX(0deg)scale(.6)', opacity:'1', offset:0.8},
{transform:'perspective(800px)rotateX(0deg)scale(.6)', opacity:'0', offset:1},
];
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://www.joy127.com/url/118433.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
rainBG("outf", "canv");aniAct();
</script>


klxf 发表于 2024-12-14 02:51:34

音乐不错，谢谢分享，有画面会更好呦:)

醉美水芙蓉 发表于 2024-12-14 07:08:49

klxf 发表于 2024-12-14 02:51
音乐不错，谢谢分享，有画面会更好呦

故意的！让你整个画面呢！

醉美水芙蓉 发表于 2024-12-14 07:09:31

klxf 发表于 2024-12-14 02:51
音乐不错，谢谢分享，有画面会更好呦

我手机可以看见呢？

klxf 发表于 2024-12-14 10:01:45

醉美水芙蓉 发表于 2024-12-14 07:09
我手机可以看见呢？

手机可以，电脑为何看不见呢:lol

klxf 发表于 2024-12-14 10:03:36

醉美水芙蓉 发表于 2024-12-14 07:08
故意的！让你整个画面呢！

哈哈，这个故意的好耶:)
页: [1]
查看完整版本: 满天星斗不及你眼眸