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

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

本帖最后由 亚伦影音工作室 于 2026-3-16 10:13 编辑 <br /><br /><style type="text/css">
.lyricDisp{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 ,#8EE73C ,#36F4B1);-webkit-background-clip: text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);text-align:left;}
.lyricDisp:nth-child(2){color: transparent;text-align:left;background: linear-gradient(45deg, #F32121 ,#8EE73C ,#36F4B1);-webkit-background-clip: text;text-align:center;font-size:1.8em;}@keyframes bgMove1{to{width:100%;}}@keyframes bgMove0{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://s2.cldisk.com/sv-w8/audio/04/dc/e7/e217499af78492b44a0cfd473898ce86/audio.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]
查看完整版本: 青悠悠的爱 - 琪琪格[粒子]