花落梦深处
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1954997">
<br /><br /><style>
#papa{ margin: 100px -400px;width: 1400px;box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow: hidden;height: 800px;background: url('https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg') no-repeat center/cover;border: 0px solid;display: grid;position: relative;z-index: 12345; --state: running;}
.photo {width: 100%; height: 100%;
position: absolute;z-index: 1;
top:0px; left:0px;
opacity: 0;
animation: round 180s linear infinite;}
@keyframes round {
0% { -webkit-transform:rotate(0)scale(1)translate(0%,0%); opacity:0}
2% { -webkit-transform:rotate(0)scale(1.5)translate(-10%,0%); opacity:1}
4% { -webkit-transform:rotate(0)scale(1.5)translate(0%,10%)rotateZ(0deg); opacity:1}
6% { -webkit-transform:rotate(0)scale(1.5)translate(0%,-10%)rotateZ(0deg); opacity:1}
8% { -webkit-transform:rotate(0)scale(1.5)translate(10%,0%)rotateZ(0deg); opacity:1}
10% { -webkit-transform:rotate(0deg)scale(1.5)translate(0%,0%)rotateZ(0deg); opacity:0}
}
img:nth-child(1) {animation-delay: 162s;}
img:nth-child(2) {animation-delay: 144s;}
img:nth-child(3) {animation-delay: 126s;}
img:nth-child(4) {animation-delay: 108s;}
img:nth-child(5) {animation-delay: 90s;}
img:nth-child(6) {animation-delay: 72s;}
img:nth-child(7) {animation-delay: 54s;}
img:nth-child(8) {animation-delay: 36s;}
img:nth-child(9) {animation-delay: 18s;}
img:nth-child(10) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10){animation-play-state: paused;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;mix-blend-mode: lighten;z-index: 3; transform: rotateX(0deg);}
#prog { position: absolute; bottom: 60px; width: 180px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:12%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;}
#prog::before, #prog::after { position: absolute; top: 10px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
#btnplay { position: absolute; top: -20px;font: normal 3.3em/0em serif;
color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 52%;
transform: translate(-50%);
top: 85%;
font:normal 2.0em 华文行楷;
font-weight:800;
color: #0000;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.0em 华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='dt'><img id="Img" src="https://pic.imgdb.cn/item/64f335fd661c6c8e54d6b032.png" width="100%" height="100%"></div>
<div id="testImg" >
<img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/6512339bc458853aef9ebeb2.jpg" />
</div>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"> <P id="btn" >❊</p></span>
<span id="slider"></span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899981562.mp3" autoplay="" loop=""></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; };
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
let prg = aud.currentTime / aud.duration * 100 + 20;
mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => { mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');mplayer.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime >= data.lrcAr) { if (mKey === j) showLrc(data.lrcAr); else continue; } } });
progP.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / progP.offsetWidth;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
花落梦深处
花落梦深处
花落梦深处
图意：东篱闲人
一定是前世未了的情
在心中留下太多感动
经过花开花谢春夏秋冬
依然对你情有独钟
一定是夜色过于朦胧
让思念再次风起云涌
多少人来人去缘分匆匆
那种寂寞只有你懂
在最深的红尘与你重逢
不负我这一生痴痴地等
无论再多的伤再苦的痛
这一刻都冰消雪融
在最深的红尘与你重逢
圆了我多年来残留的梦
纵然再大的雨再狂的风
我们一起风雨兼程
一定是前世未了的情
在心中留下太多感动
经过花开花谢春夏秋冬
依然对你情有独钟
一定是夜色过于朦胧
让思念再次风起云涌
多少人来人去缘分匆匆
那种寂寞只有你懂
在最深的红尘与你重逢
不负我这一生痴痴地等
无论再多的伤再苦的痛
这一刻都冰消雪融
在最深的红尘与你重逢
圆了我多年来残留的梦
纵然再大的雨再狂的风
我们一起风雨兼程
在最深的红尘与你重逢
不负我这一生痴痴地等
无论再多的伤再苦的痛
这一刻都冰消雪融
在最深的红尘与你重逢
圆了我多年来残留的梦
纵然再大的雨再狂的风
我们一起风雨兼程
吉他 : 刘奕辰
和声 : Zing Studio
混音 : 王哲
发行 : 壹歌传媒
出品人 : 王峰
【该歌曲未经发行方书面授权，禁止上传任何版本至音乐平台】
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
</td></tr></table>
</div>
<div id="comment_1954997" class="cm">
</div> 老头这个图图大的，歌词搞这么小{:4_189:} 这个把前面的图片制作变成了代码音画帖子了，更漂亮{:4_199:} 老头厉害，居然一张图图转换到底{:4_199:} 小辣椒 发表于 2023-9-26 21:50
老头这个图图大的，歌词搞这么小
俺对那大字感觉不好。。。 红影 发表于 2023-9-26 21:50
这个把前面的图片制作变成了代码音画帖子了，更漂亮
来。。。。{:4_180:}{:4_180:} 小辣椒 发表于 2023-9-26 21:52
老头厉害，居然一张图图转换到底
这不叫厉害，这叫省事。。。{:4_189:} 东篱闲人 发表于 2023-9-26 21:54
俺对那大字感觉不好。。。
我眼睛不行，小的字根本看不了，而且亚伦的代码歌词出来很快消失的 东篱闲人 发表于 2023-9-26 21:55
这不叫厉害，这叫省事。。。
我看了晕晕的{:4_170:} 小辣椒 发表于 2023-9-26 21:56
我眼睛不行，小的字根本看不了，而且亚伦的代码歌词出来很快消失的
戴老花镜。。。 小辣椒 发表于 2023-9-26 21:57
我看了晕晕的
晕一会，就不晕了。。{:5_117:} 东篱闲人 发表于 2023-9-26 21:54
来。。。。
你家水真多，用来浇花倒不错{:4_173:} 红影 发表于 2023-9-26 22:57
你家水真多，用来浇花倒不错
不要浪费，你喝。。。。{:5_116:} 东篱闲人 发表于 2023-9-27 10:00
不要浪费，你喝。。。。
别客气，东篱大哥自己喝{:4_173:} 红影 发表于 2023-9-27 13:58
别客气，东篱大哥自己喝
不渴。 东篱闲人 发表于 2023-9-27 19:52
不渴。
那也要防着渴，来，喝吧{:4_180:} 红影 发表于 2023-9-27 20:56
那也要防着渴，来，喝吧
{:4_172:} 东篱闲人 发表于 2023-9-27 21:42
喝点水这么开心啊，看样子还得再多喝点{:4_180:} ◆东
西风将背面靠向你
思念的路上
影与影 对峙 非常伤心 发表于 2023-10-8 10:46
◆东
西风将背面靠向你
◆篱
落花的季节
一片一片的忧伤
漫过 你的岸
页:
[1]
2