感人的催泪神曲《化风行万里》
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2.0em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.5em;}
.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:2.0em;}@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:650px;
top: 150px;
left: -470px;
bbbackground-size:cover;
background-color:#7c0614;font-size:18px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #7c0614;
position: relative;
margin:10px300px;
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: 650px;
animation: fly 100s linear infinite;
cursor: pointer;
opacity: 0;
}
#mpicc { position: absolute;
top: 0px;
left: 0px;
width: 1200px;z-index: 10;
height: 650px;
animation: tot 80s linear infinite;
cursor: pointer;
opacity: 0;
}
#hWindow:hover #mpic { position: absolute;
top: 0px;
left: 0px;
width: 1200px;z-index: 10;
height: 650px;
animation: fly 100s linear infinite;
cursor: pointer;
opacity: 1; transition: 0.3s;
}
#hWindow:hover #mpicc { position: absolute;
top: 0px;
left: 0px;
width: 1200px;z-index: 10;
height: 650px;
animation: tot 80s linear infinite;
cursor: pointer;
opacity: 1; transition: 0.3s;
}
@keyframes fly {0%{
background-position: 600% 0;
}
100%{
background-position: 30% 1600%;filter:hue-rotate(360deg)
}
}
@keyframes tot { 0%{
background-position: 0% -1600%;
}
100%{
background-position: 0% 0%;filter:hue-rotate(360deg)
}
}
</style>
<div id="hWindow">
<div id="curp"></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('https://pan.doliy.cn/filestores/2022/11/18//d958ce06a501cc8d3be7bb7596379973.gif ')0 0/50% 50%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('https://pan.doliy.cn/filestores/2022/11/18//d958ce06a501cc8d3be7bb7596379973.gif ')0 0/40% 40%" >
<div id="rdisk" style="width:100px;height:100px;border: 1px solid #000000;
background: url('https://pan.doliy.cn/filestores/2022/11/18//734ccabac46eccad8397c5c22686a61d.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;">
化风行万里--米灵
词/曲：聂小慧
LRC编辑：撒雨
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
就一句对不起结束当初的约定
你转身离开得毫不犹豫
被遗忘的曾经又泛起了涟漪
有多可惜却无能为力
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
</pre>
</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://pan.doliy.cn/filestores/2022/11/18//6a87802c2991255d50c54777826bd93e.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//d2be273215d74a3d5ddd3442aa280bbf.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//1d297cda3b9b1028d9bbc2f78f7cc3bf.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//c979c79795f0a6779bef537bc58f48ef.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//d436259e1b684bc86d6ef2b5326c00ac.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//a0d992ccd1abe3304f1cb9b2a928ded6.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//97cbbf0d4aeb24c925cc0b6f0cff7ea9.jpg",
"https://pan.doliy.cn/filestores/2022/11/18//144efe103b752cb57898e5768ac104f0.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(90deg)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 = {
lrcTxtID:'lrc_content',
lrcShowID:"LRCShow",
audioURL:"https://pan.doliy.cn/filestores/2022/11/18//f6e6996d9e6ed6366d9212dacf6c4398.mp3",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br> 欣赏了！谢谢！ 楚心兰 发表于 2022-11-18 21:27
欣赏了！谢谢！
谢谢欣赏{:10_402:} 撒哈拉的雨 发表于 2022-11-18 21:29
谢谢欣赏
客气客气，在听歌。
楚心兰 发表于 2022-11-18 21:33
客气客气，在听歌。
周末快乐{:10_402:}
撒雨好会选美女，每帧片片都是那么漂亮{:10_402:}
苏三月 发表于 2022-11-18 21:59
撒雨好会选美女，每帧片片都是那么漂亮
三月感觉这些美女漂亮?
苏三月 发表于 2022-11-18 21:59
撒雨好会选美女，每帧片片都是那么漂亮
我感觉就一般般，美女图片漂亮的找不到{:9007:}
这是遮罩吗？ 好精彩{:9022:}
音乐也好听{:9022:}