惜别的海岸
<div class="t_fsz"><style type="text/css">
.papa {
margin: 30px -30px;
width: 960px;
height: 600px;
background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif')0 0/20%20%, url('http://www.yinhuabbs.cn/data/attachment/forum/202206/22/171141st7ztm14ts5ggzng.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;
letter-spacing: 2px;
--aniName: bgMove1;
--durTime: 1ms;
--aniPlayState: running;
transform: perspective(160px)rotateY(20deg);
font: bold 40px/2 georgia,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 =`惜别的海岸 - 龙飘飘
苦涩的海风静静地吹送
海面一片朦胧何处有你影踪
远处汽笛声声夹着海浪声
催老我美丽的人生
想起过去的岁月里
在这长久的海岸上
和你朝朝暮暮看日落又一生
虽然你不在我身边
对你的情意永在我心底
此情此景
旧日的爱
只有挥手说再见
苦涩的海风静静地吹送
海面一片朦胧何处有你影踪
远处汽笛声声夹着海浪声
催老我美丽的人生
想起过去的岁月里
在这长久的海岸上
和你朝朝暮暮看日落又一生
虽然你不在我身边
对你的情意永在我心底
此情此景
旧日的爱
只有挥手说再见
想起过去的岁月里
在这长久的海岸上
和你朝朝暮暮看日落又一生
虽然你不在我身边
对你的情意永在我心底
此情此景
旧日的爱
只有挥手说再见
`;
var opts = {
lrcTxt: lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=16430861.mp3'};
new lrcPlayerY(opts);
</script> 欣赏一下，谢谢。 欣赏收藏老师新作 好看又好听 蓝魔 发表于 2022-11-25 23:11
欣赏一下，谢谢。
谢谢老师的欣赏和鼓励 非常开心 发表于 2022-11-27 11:37
欣赏收藏老师新作 好看又好听
谢谢老师的欣赏和鼓励
页:
[1]