我在杨家溪等你（DJ 默涵版）-张怡诺
本帖最后由 亚伦影音工作室 于 2022-11-4 12:34 编辑 <br /><br /><style type="text/css">.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:blue;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;}#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;}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
#hWindow {
width:1024px;
height:600px;
bbbackground-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg);
bbbackground-size:cover;
background-color:#800000;font-size:18px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 6px #880000;
position: relative;
margin:10px-180px;
overflow:hidden;
border-radius:0px;
}
#curp {
width: 100%;
height:100%;
background-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg);
background-size: cover;
transform-origin: center;
position:absolute; top:0px; left:0px;
}
</style>
<div id="hWindow">
<div id="curp"></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>
<audio src="https://www.qqmc.com/up/kwlink.php?id=247485961&.mp3" id="mplay"loop >
</audio>
</div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
我在杨家溪等你（DJ 默涵版）-张怡诺
作词：鑫明/陈永迁
作曲：鑫明
制作人：亚伦
出品发行：亚伦音画工作室
有一个秀丽的地方
诗韵在山水间流淌
百丈飞瀑声彻山岗
卅里清溪蒹葭苍苍
有一个自在的地方
白鹭成群溪头飞翔
蜂蝶飞舞在鲜花上
群鱼嬉戏在竹筏旁
这里是传奇的地方
溪名相传自杨家将
古道古桥石洞石像
绿榕红枫相依相傍
海国桃源鱼米之乡
绿水青山声名远扬
这里真是个好地方
我在此等你来观光
有一个自在的地方
白鹭成群溪头飞翔
蜂蝶飞舞在鲜花上
群鱼嬉戏在竹筏旁
这里是传奇的地方
溪名相传自杨家将
古道古桥石洞石像
绿榕红枫相依相傍
海国桃源鱼米之乡
绿水青山声名远扬
这里真是个好地方
我在此等你来观光
这里是传奇的地方
溪名相传自杨家将
古道古桥石洞石像
绿榕红枫相依相傍
海国桃源鱼米之乡
绿水青山声名远扬
这里真是个好地方
我在此等你来观光
这里真是个好地方
我在此等你来观光
</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/f708e3a9bc8a313eaf6073256aaeeee4.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/26b8da5fbd320aa92e95f0546dbbe2a3.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/858f07b92ecfa51dc149aa105b1127d0.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/8616bdc921980f97aaaa3e46e1e65dd4.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d28481f99b572edc35c4d97efc8de95c.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/92e67d231fc1b6448da83589296374a0.jpeg"
];
var keyFrames =
[{clipPath:'polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0)', opacity:'1'},
{clipPath:'polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0)', opacity:'1', offset:0.33},
{clipPath:'75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0)', opacity:'1', offset:0.35},
{clipPath:'polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0)', opacity:'1', offset:0.67}
];
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=247485961&.mp3",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
</script> 背景里的风景和人物都很漂亮，欣赏亚伦老师好帖{:4_187:} 欣赏、点赞
第二行歌词换个颜色是不是好点。 美就一个字
欣赏音画佳作！
页:
[1]