亚伦影音工作室 发表于 2022-11-7 16:37

青悠悠的爱 - 琪琪格[粒子]

本帖最后由 亚伦影音工作室 于 2022-11-9 14:25 编辑 <br /><br /><style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 1.8em悟空大字库, sans-serif; transition:.4s all ease;}
.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%,#FEFFFF 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%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;text-align:center;font-size:1.8em;}@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:150px-300px;
                overflow:hidden;
                border-radius:0px;z-index: 9;
        }
        #curp        {
                width: 100%;
                height:100%;
               
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 1200px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 1200px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0;
}
#mpiccc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 600px;
        animation: tott 1s linear infinite;
        cursor: pointer;
        opacity: 0;
}
#hWindow:hover #mpiccc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 600px;
        animation: tott 1s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}
#hWindow:hover #mpic { position: absolute;
        top: -80px;
        left: -180px;
        width: 1200px;z-index: 10;
        height: 1200px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}
#hWindow:hover #mpicc { position: absolute;
        top: 0px;
        left: 180px;
        width: 1200px;z-index: 10;
        height: 1200px;
        animation: tot 70s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}

@keyframes fly {0%{
      background-position: 0% 0;transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% 0%;transform:rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(.6);
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}
@keyframes tott { 0%{
      background-position: 0% 0%;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}
</style>
<div id="hWindow">
<div id="curp"></div>
<divid="mpiccc"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/10bd759b731249607fdcb3906de27948.png')0 0/30% 50%" ></div>
       <divid="mpic"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/10bd759b731249607fdcb3906de27948.png')0 0/30% 50%" ></div>
<divid="mpicc"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/10bd759b731249607fdcb3906de27948.png')0 0/30% 50%" ></div>
    <div id="rdisk" style="width:80px;height:80px;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:10px;" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
         
         
    </div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
                        青悠悠的爱 - 琪琪格
作词：童童
作曲：高云龙
编曲：班布拉
有一根琴弦在风中缠绵
眼前又浮现花开的容颜
露珠一样清新霞光耀眼
是谁展开一幅醉人的画卷
有一缕相思在心头挂牵
梦里又放飞悠长的思念
大海一样宽广蓝天悠远
是谁写下一首浪漫的诗篇
青悠悠的草原开满萨日朗
就让我的爱情陪你走天涯
和你一起漫步蓝天白云下
草原上的爱能把我融化
有一根琴弦在风中缠绵
眼前又浮现花开的容颜
露珠一样清新霞光耀眼
是谁展开一幅醉人的画卷
有一缕相思在心头挂牵
梦里又放飞悠长的思念
大海一样宽广蓝天悠远
是谁写下一首浪漫的诗篇
青悠悠的草原开满萨日朗
就让我的爱情陪你走天涯
和你一起漫步蓝天白云下
草原上的爱能把我融化
青悠悠的草原开满萨日朗
就让我的爱情陪你走天涯
和你一起漫步蓝天白云下
草原上的爱能把我融化
青悠悠的草原开满萨日朗
就让我的爱情陪你走天涯
和你一起漫步蓝天白云下
草原上的爱能把我融化
草原上的爱能把我融化
</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 =[
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/508b7817c27e3380fe00d924adace572.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cb41dacbb046d10732f324ae909bfc7.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/8f24104606dd975c8d0c8d6ecaa9ee07.jpg",
"https://img-baofun.zhhainiao.com/fs/ec6f1143509105c52b475fb2cb9bcc73.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/01c53790a832c7dd920fe46e03d56a92.jpg",
"https://img-baofun.zhhainiao.com/fs/68d07469d6053187a0c52d94c047b4ed.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/1847f2c1545516e3463578793058eebd.jpg",
"https://img-baofun.zhhainiao.com/fs/6ded602cf20b1527aa3e800d57bf96ff.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.qqmc.com/up/kwlink.php?id=26232054&.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
</script>

小辣椒 发表于 2022-11-7 18:52

现在歌词改小了一点吗，我现在是手机，感觉歌词比前面那个上去了一点
{:4_199:}{:4_199:}

红影 发表于 2022-11-7 22:04

漂亮的带光环的粒子，鼠标可控。非常精美的制作。欣赏亚伦老师好帖{:4_187:}

相约爱晚亭 发表于 2022-11-8 07:30

欣赏音画佳作！
页: [1]
查看完整版本: 青悠悠的爱 - 琪琪格[粒子]