山坡坡
<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/202207/25/183201yfjfifixmlz25fxj.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 =`山坡坡DJ(对唱版)
词曲：简单小芳
原唱：简单小芳&月下思故人
编辑 ：午老虎
女:谁家的小哥哥呀
偷偷的在看我
一笑就露出了
那个酒窝窝
男:谁家的小妹妹呀
让我着了魔
一双眼明又亮
闪呀嘛闪秋波
女:哥哥你莫要走啊
妹妹有话说
你要是喜欢我
带我走出山坡坡
带我走出山坡坡
合:山坡坡山坡坡
隔着你和我
男:只要妹妹你爱着我
我和你一起翻过
我和你一起翻过
合:山坡坡山坡坡
隔着你和我
女:只要哥哥你爱着我
妹妹把你藏心窝
妹妹把你藏心窝
男:谁家的小妹妹呀
偷偷的在想我
思念的泪珠儿
流在了心窝窝
女:谁家的小哥哥呀
悄悄话儿对我说
他说那花开时
来呀嘛来接我
男:妹妹你莫泪落呀
哥哥有话说
你要是喜欢我
我带你走出山坡坡
带你走出山坡坡
合:山坡坡山坡坡
隔着你和我
女:只要哥哥你爱着我
妹妹把你藏心窝
妹妹把你藏心窝
合:山坡坡山坡坡
隔着你和我
男:只要你还爱着我
我和你一起翻过
我和你一起翻过
合:山坡坡山坡坡
隔着你和我
只要你还爱着我
我和你一起翻过
我和你一起翻过
`;
var opts = {
lrcTxt: lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=239215535&.mp3'
};
new lrcPlayerY(opts);
</script> 欣赏一下，谢谢。 欣赏收藏老师新作 好看又好听 蓝魔 发表于 2022-11-25 23:12
欣赏一下，谢谢。
谢谢老师的欣赏和鼓励 非常开心 发表于 2022-11-27 11:37
欣赏收藏老师新作 好看又好听
谢谢老师的欣赏和鼓励
页:
[1]