酒醉的蝴蝶
本帖最后由 起个网名好难 于 2022-11-14 09:56 编辑 <br /><br /><style type="text/css">.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:微软雅黑;transition:.3s all ease;font-size:2.4em;}.lyricDisp:nth-child(1){color:gray;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:darkred;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:1.5em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}#LRCShow{position:absolute;left:15%;bottom:10px;width:80%;height:100px;margin:16px auto
position:relative;}#rdisk{position:absolute;left:80px;bottom:10px;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}
#hWindow {
width:960px;
height:640px;
bbbackground-image:url(https://s1.ax1x.com/2022/03/23/qlTbYF.jpg);
bbbackground-size:cover;
background-color:#ccf;font-size:18px;
border: thick brown ridge;
position: relative;
margin:100px 16px 32px -180px;
overflow:hidden;
border-radius:24px;
}
#curp {
width: 100%;
height:100%;
background-image:url(https://s1.ax1x.com/2022/03/23/qlTreP.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="position:absolute;left:10px;bottom:10px;">☀</div>
<div id="LRCShow" style="position:absolute;left:15%;bottom:10px;" >
<div class="lyricDisp"></div><div class="lyricDisp"></div>
<audio src="http://link.hhtjim.com/kw/77717681.mp3" id="mplay"loop >
</audio>
</div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
酒醉的蝴蝶(女生版DJ何鹏版) - 孙艺琪
词：刘海东
曲：刘海东
D J ：何鹏
伴唱：凌菲
发行：大河唱片
怎么也飞不出
花花的世界
原来我是一只
酒醉的蝴蝶
你的那一句誓约
来的轻描又淡写
却要换我这一生
再也解不开的结
春去镜前花
秋来水中月
花开花时节
月落月圆缺
原来我就是那一只
酒醉的蝴蝶
</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://s1.ax1x.com/2022/03/23/qlTreP.jpg",
"https://s1.ax1x.com/2022/03/23/qlTsdf.jpg",
"https://s1.ax1x.com/2022/03/23/qlTyo8.jpg",
"https://s1.ax1x.com/2022/03/23/qlTBLt.jpg",
"https://s1.ax1x.com/2022/03/23/qlT0sI.jpg",
"https://s1.ax1x.com/2022/03/23/qlTcFS.jpg",
"https://s1.ax1x.com/2022/03/23/qlTgJg.jpg",
"https://s1.ax1x.com/2022/03/23/qlT2WQ.jpg",
"https://s1.ax1x.com/2022/03/23/q1lOaj.jpg",
"https://s1.ax1x.com/2022/03/23/q1lLZQ.jpg",
"https://s1.ax1x.com/2022/03/23/qlTRzj.jpg",
"https://s1.ax1x.com/2022/03/23/qlTfQs.jpg",
"https://s1.ax1x.com/2022/03/23/qlThyn.jpg",
"https://s1.ax1x.com/2022/03/23/qlT4Lq.jpg",
"https://s1.ax1x.com/2022/03/23/qlTIe0.jpg",
"https://s1.ax1x.com/2022/03/23/qlTToT.jpg",
"https://s1.ax1x.com/2022/03/23/qlTowV.jpg",
"https://s1.ax1x.com/2022/03/23/qlTHFU.jpg",
"https://s1.ax1x.com/2022/03/23/qlTbYF.jpg"
];
var keyFrames =
/***[{clipPath: 'polygon(50% 0%, 50% 50%, 0% 50%, 50% 50%,50% 100%, 50% 50%, 100% 50%, 50% 50%)', opacity:'0.4'},
{clipPath: 'polygon(50% 0%, 25% 25%, 0% 50%, 25% 75%,50% 100%, 75% 75%, 100% 50%, 75% 25%)', opacity:'0.7', offset:0.5},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'1', offset:0.8},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'0.4'}];***/
[{clipPath: 'polygon(50.0% 46.9%, 50.5% 49.1%, 52.0% 49.1%, 50.7% 50.4%, 51.2% 52.6%, 50.0% 51.2%, 48.8% 52.6%, 49.2% 50.4%, 48.0% 49.1%, 49.5% 49.1%)', opacity:'0.3'},
{clipPath: 'polygon(50.0% 42.2%, 51.1% 47.7%, 55.0% 47.7%, 51.9% 51.1%, 53.0% 56.4%, 50.0% 53.1%, 47.0% 56.4%, 48.1% 51.1%, 45.0% 47.7%, 48.9% 47.7%))', opacity:'0.7', offset:0.33},
{clipPath: 'polygon(50.0% 0.0%, 57.3% 35.0%, 82.0% 35.0%, 62.0% 57.0%, 69.3% 91.0%, 50.0% 70.0%, 30.7% 91.0%, 38.0% 57.0%, 18.0% 35.0%, 42.7% 35.0%)', opacity:'1', offset:0.67},
{clipPath: 'polygon(50.0% 0.0%, 100% 0%, 100% 50%, 100% 100%, 69.3% 100%, 50.0% 100%, 30.7% 100%, 0% 100%, 0% 35.0%, 0% 0%)', opacity:'0.3'}];
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=77717681&.mp3",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
</script>
欣赏精美音画佳作！ 相约爱晚亭 发表于 2022-10-30 14:41
欣赏精美音画佳作！
感谢你的欣赏 醉美水芙蓉 发表于 2022-10-30 17:50
欣赏老师佳作！
感谢你的欣赏
欣赏精美音画佳作！ 漂亮的图片轮播效果和双行歌词，喜欢的歌儿。欣赏起个网名好难好帖{:4_187:} 亦是金 发表于 2022-10-30 19:59
欣赏精美音画佳作！
感谢你的欣赏 红影 发表于 2022-10-30 20:00
漂亮的图片轮播效果和双行歌词，喜欢的歌儿。欣赏起个网名好难好帖
感谢你的欣赏 哇瑟~~~这个播放器按钮感觉像那啥~~~{:4_170:} 好听，好看{:4_178:} 小辣椒 发表于 2022-10-30 20:28
哇瑟~~~这个播放器按钮感觉像那啥~~~
随便找的个符号像太阳。 小辣椒 发表于 2022-10-30 20:30
好听，好看
感谢你的欣赏 起个网名好难 发表于 2022-10-30 20:42
随便找的个符号像太阳。
不错{:4_187:} 起个网名好难 发表于 2022-10-30 20:42
感谢你的欣赏
不客气啊 小辣椒 发表于 2022-10-30 20:48
不错
现在换花瓣了{:5_106:} 小辣椒 发表于 2022-10-30 20:48
不客气啊
应该的{:5_108:} 起个网名好难 发表于 2022-10-30 20:05
感谢你的欣赏
客气了，谢谢你带来的好帖{:4_187:} 起个网名好难 发表于 2022-10-30 21:29
现在换花瓣了
你还会多变，不错，主要换个图图就可以了{:4_187:} 小辣椒 发表于 2022-10-30 22:43
你还会多变，不错，主要换个图图就可以了
就是个特殊字符就和换个汉字一样。
页:
[1]
2