《祈祷》翻唱：虎妞
<style>#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center; background: url('https://pic.imgdb.cn/item/64f27e50661c6c8e549c11b4.jpg') no-repeat center/cover; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 122%; top:-9%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .95; }
#prog { position: absolute; bottom: 60px;left: 220px; width: 300px; height: 8px; border: 1px solid lightblue; border-radius: 10px;background: linear-gradient(to right, green, red var(--prg), #eee 0); color: gold; --prg: 0%; --state: paused; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#btnplay { position: absolute; top: -90px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; opacity: .9; background: url('https://pic.imgdb.cn/item/64f27cb2661c6c8e549b8b66.jpg') no-repeat center/cover; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#pic1 { position: absolute; right: 218px; bottom: 0px; width: 185px; height: 310px; opacity: 1; z-index: 3; }
.gecikuang { position: absolute; left:-140px;top: 36px; width: 1000px; height: 50px; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 26px; font: bold 2.8em sans-serif; color: hsl(300, 100%, 100%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 100%, 50%, .75), hsla(20, 100%, 50%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
.flyBox { --w: 220px; width: var(--w); overflow: hidden; color: gold; position: absolute; left:240px;bottom: 20px; font-size: 14px; }
.flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; }
.txt{position: absolute; z-index: 3; right: 246px; top: 254px; --c: SandyBrown;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2);background-position-x: -200%, -100%, 0%, 100%;background-position-y: 100%;background-size: 50.5% 100%;animation: m 1.6s infinite linear ;font-size: 60px;font-weight: bold;color: transparent;-webkit-background-clip: text; -webkit-text-stroke: 2px var(--c);
}
@keyframes m {0%{background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:0%, 100%, 200%, 300%}}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/18/72/61ca83babdca1_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
<img id="pic1" src="https://pic.imgdb.cn/item/64f2950c661c6c8e549fbe43.png" alt="" />
<div class="gecikuang">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div></div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"></span>
</div>
<div class="flyBox"><div>翻唱《祈祷》 演唱者：虎妞美女</div></div>
<div class="txt">祈祷</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/09/02/d2cc1873846fdddaa2428b452d687905.mp3" autoplay loop></audio>
<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
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);
});
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
用你的歌声做成歌词同步送你，做的不好，一份心意。愿你玩得开心@虎妞{:4_187:} 感谢黑黑的代码。这个是之前的不是打包的，我把歌词套个框移个位置，可以让它在新的地方居中了@马黑黑 {:4_204:} 放了视频在上面，估计手机看不到{:4_173:} 水面的波纹做得很好，很漂亮。
虎妞唱的真好。 艾玛，我还唱过这歌儿呢？我都忘了{:4_170:} 漂亮，影子这是给我的歌儿贴金呢，谢谢影子，辛苦了{:4_187:} 红影 发表于 2023-9-2 14:41
用你的歌声做成歌词同步送你，做的不好，一份心意。愿你玩得开心@虎妞
做的很漂亮，我喜欢 梦油 发表于 2023-9-2 15:07
水面的波纹做得很好，很漂亮。
虎妞唱的真好。
谢谢梦油同学鼓励{:4_191:}问好！ 虎妞 发表于 2023-9-2 16:33
谢谢梦油同学鼓励问好！
希望经常欣赏到虎妞朋友的演唱。 红影 发表于 2023-9-2 14:42
感谢黑黑的代码。这个是之前的不是打包的，我把歌词套个框移个位置，可以让它在新的地方居中了@马黑黑 {:4_ ...
歌词的位置不用套框的 亲爱的，好漂亮的制作，这个水动字特别漂亮 虎妞 发表于 2023-9-2 16:31
漂亮，影子这是给我的歌儿贴金呢，谢谢影子，辛苦了
亲爱的，这歌唱的特别柔情，好听，无论抒情的，豪放的，统统脑轻松驾驭，好棒{:4_208:}{:4_178:} 梦油 发表于 2023-9-2 15:07
水面的波纹做得很好，很漂亮。
虎妞唱的真好。
是啊，这首也特别好听呢{:4_173:} 虎妞 发表于 2023-9-2 16:29
艾玛，我还唱过这歌儿呢？我都忘了
你发在论坛的啊，我去翻了一下找到这首{:4_173:} 虎妞 发表于 2023-9-2 16:31
漂亮，影子这是给我的歌儿贴金呢，谢谢影子，辛苦了
不客气啊，你的歌儿本来就好听{:4_185:} 虎妞 发表于 2023-9-2 16:32
做的很漂亮，我喜欢
你看看那播放器按钮，就是用你的新头像做的{:4_173:} 马黑黑 发表于 2023-9-2 17:56
歌词的位置不用套框的
我移动到左边，不套框它就靠左了啊，我想让它总体位置移动后仍然在那个位置上居中啊{:4_173:} 小辣椒 发表于 2023-9-2 19:04
亲爱的，好漂亮的制作，这个水动字特别漂亮
呵呵，想起水动字，觉得在海的背景里挺适合，就用上了{:4_173:}