《胜战之问》致敬最可爱的人！
<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 675px; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center; background: url('https://s1.ax1x.com/2023/07/30/pPpVUmD.jpg') no-repeat center/cover;}
.vid { position: absolute; width: 1200px; height: 675px; object-fit: cover; }
#prog { position: absolute; bottom: 20px;left: calc(50% - 200px); width: 400px; height: 8px; border: 1px solid lightblue; border-radius: 10px;background: linear-gradient(to right, green, red var(--prg), #ffb61e 0); color: red; --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: -70px; left: calc(50% - 30px); width: 60px; height: 60px; background: url('https://s1.ax1x.com/2023/07/28/pPSSD6s.png') no-repeat center/cover; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#pic { position: absolute; right: 0px; top: 16px; width: 200px; height: 105px; }
#pic1 { position: absolute; left: 5px; bottom: 12px; width: 200px; height: 200px; opacity: 0.8; }
#pic2 { position: absolute; left: 15px; bottom: 210px; width: 100px; height: 67px; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 26px; font: bold 2.6em 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%, .45), hsla(0, 100%, 66%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@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 class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b570630127ef_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://s1.ax1x.com/2023/07/29/pPSZHYR.png" alt="" />
<img id="pic1" src="https://s1.ax1x.com/2023/07/29/pPSm8PA.png" alt="" />
<img id="pic2" src="https://s1.ax1x.com/2023/07/29/pPSm0aQ.png" alt="" />
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"></span>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/20/926deb879dc78f81f967a8292885cdbd.mp3" autoplay loop></audio>
<script>
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;
</script> 狭路相逢勇者胜，向所有的战士和曾经的战士们致敬，致敬勇者，感谢你们的付出。祝八一建军节快乐。敬礼！{:4_177:} 这首歌还是在央视7的军事频道听到，觉得特别给力。
喜欢军歌，特别带给人雄壮的气势，令人热血沸腾。这点是靡靡之音无法相比的{:4_173:} 记得论坛有很多人有过军旅生涯，为了防止遗漏就不一一点名了。
将这首军歌送给你们，祝福建军节快乐{:4_177:} 本帖最后由 梦油 于 2023-7-30 10:58 编辑
祝愿我们最可爱的人节日快乐、永远健康平安！感谢你们为国家的和平稳定付出的努力和牺牲。八一建军节快乐!
{:4_204:}
选择高山，就选择了坎坷；选择宁静，就选择了孤单；选择机遇，就选择了风险；选择军营，就选择了磨砺!
感谢你们，在保家卫国的许多年里。却从不曾迟到过，一起致敬一路感恩{:4_187:} 因为有你们的负重前行，才有我们的岁月静好。
致敬所有可敬的军人们{:4_187:} 祝福我以前的战友们、现役的军人们节日快乐！ 亲爱的好棒，用了图片按钮{:4_199:} 马上“八一”建军节了，一起向我们最可爱的人致敬 也是向所有退 转役军人致敬{:4_187:} 醉美水芙蓉 发表于 2023-7-30 11:11
@马黑黑 老师！手机qq浏览器可以完美看见带视频的音画！红影美女做得漂亮！
嗯，谢谢 感谢楼主管管对俺的祝福。谢谢！ 影子的贴子正能量满满……气势十足，尽显出贴人心胸宽广，个性豪爽……看得人热血沸腾~~~{:4_187:}大爱！ 向坛子里的军人们致敬！{:4_187:} 梦油 发表于 2023-7-30 10:51
祝愿我们最可爱的人节日快乐、永远健康平安！感谢你们为国家的和平稳定付出的努力和牺牲。八一建军节快乐!
...
跟梦油一起祝福英勇的军人们{:4_187:} 小文 发表于 2023-7-30 11:07
祝福我以前的战友们、现役的军人们节日快乐！
小文也曾是军人，祝福你节日快乐{:4_204:} 醉美水芙蓉 发表于 2023-7-30 11:11
@马黑黑 老师！手机qq浏览器可以完美看见带视频的音画！红影美女做得漂亮！
谢谢水芙蓉美女鼓励，我们一起祝福军人们节日快乐{:4_187:}