苦咖啡 - 汤潮
本帖最后由 亚伦影音工作室 于 2022-10-27 14:37 编辑 <br /><br /><style type="text/css">.papa {
margin: 30px -214px;
width: 1024px;
height: 600px;
background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif')0 0/20%20%, url('https://img-baofun.zhhainiao.com/fs/f9956ddac0f261402e772d8255e5171a.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
position: relative;
z-index: 1;
}
.lrcShow {
position: absolute;
bottom: 200px;
left: 380px;
color: #00f000;
font-family: 华文隶书;
letter-spacing: 2px;
--aniName: bgMove1;
--durTime: 1ms;
--aniPlayState: running;
transform: perspective(160px)rotate(20deg)rotateY(20deg);
font: bold 40px/1.8 悟空大字库,sans-serif;
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 10%,rgba(255,255,255,.6))
}
.lrcShow::before {
position: absolute;
content: attr(data-lrc);
width: 0%;
height: 100%;
left: 0px;
top: 0;
color: transparent;
background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif')0 0/50%50%,linear-gradient(28deg, #FB0000 31%,#F8F9FA 53%,#F5D603 70%);
-webkit-background-clip: text;
filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)hue-rotate(0deg)contrast(150%)brightness(200%);
overflow: hidden;
white-space: nowrap;
animation: var(--aniName) var(--durTime) linear forwards;
animation-play-state: var(--aniPlayState);
}
@keyframes bgMove1 {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes bgMove0 {
from {
width: 0;
}
to {
width: 100%;
}
}
.mCtrl {
border: 1px solid gray;
border-radius: 50%;
display: inline-block;
width: 80px;
height: 80px;
margin: 0px;
position: absolute;
bottom: 10px;
right: 100px;
transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);
background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
-webkit-mask: radial-gradient(transparent 7px,red 0);
}
.z360z {
animation: rotating 10s linear infinite;
}
@keyframes rotating {
0% {
transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);
}
100% {
transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);
}
}
</style>
<div class="papa " >
<divclass="lrcShow" data-lrc='亚伦影音工作室'>亚伦影音工作室</div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(lrcs.length==0&&_t!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_t,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
var lrc =`苦咖啡 - 汤潮 (Tony Tang)
词：汤潮
曲：汤潮
制作人：方辉
爱你就像大风往北吹
吹落我对你那相思泪
离开你的那天大雪满天飞
可惜我连头也没敢回
如今你的身边还有谁
是否为你擦干过泪水
是否还有人陪你去喝
不加糖的苦 咖 啡
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
那种滋味 让我回味
只要你快乐就是我的安慰
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
在不在一起 已经无所谓
只要你幸福就是我的安慰
苦咖啡 真的美
那滋味 让我回味
时光匆匆仍然往前追
前尘往事都化作尘灰
默默的为你祈祷一回
窗外雷声雨纷飞
如今你的身边还有谁
是否为你擦干过泪水
是否还有人陪你去 喝
不加糖的苦 咖 啡
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
那种滋味 让我回味
只要你快乐就是我的安慰
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
在不在一起 已经无所谓
只要你幸福就是我的安慰
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
那种滋味 让我回味
只要你快乐就是我的安慰
我想着你的美 我想着你的泪
想着我陪你喝的苦咖啡
在不在一起 已经无所谓
只要你幸福就是我的安慰
苦咖啡 真的美
那滋味 让我回味`;
var opts = {
lrcTxt: lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=6684169&.mp3'
};
new lrcPlayerY(opts);
</script> 很奇特的歌词同步。欣赏亚伦老师好帖{:4_187:} 欣赏大作 {:5_116:}{:5_116:}漂亮 欣赏精彩制作
页:
[1]