我们美丽的祖国—热烈祝贺祖国73周年华诞
<style>
#papa { left: -302px; width: 1200px; background: #333 url('https://pic1.imgdb.cn/item/63369b3816f2c2beb169bfff.jpg') no-repeat center/cover; height: 640px; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; position: relative; overflow: hidden; }
#mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,255,0,.25); }
#tmsg { font: normal 16px sans-serif; color: lightgreen;}
#lrc { position: absolute; bottom: 80px; font: bold 1.5em sans-serif; color: lightgreen; text-shadow: 1px 1px 2px #000; text-align: center; }
.lrcChar { margin: 1px; padding: 6px; width: 60px; height: 60px; text-align: center; clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);font: bold 1.0em / 66px sans-serif; display: inline-block; text-shadow: 1px 1px 1px #000; opacity: .65; backdrop-filter: blur(3px); position: relative; }
#vid { position: absolute; width: 1200px; height: 695px; top: -55px; object-fit: cover; mix-blend-mode: screen; }
#yanhua1 { position: absolute; left: 0px; top:10px; width: 563px; height: 448px; }
#yanhua2 { position: absolute; right: -20px; top:100px; width: 507px; height: 394px; }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/31/65/5fb091975e282.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">花潮lrc歌词</div>
<img id="yanhua1" src="https://pic1.imgdb.cn/item/626dd194239250f7c53cfce9.gif" alt="" />
<img id="yanhua2" src="https://pic1.imgdb.cn/item/626dd280239250f7c53e6e2f.gif" alt="" />
</div>
<script>
let lrcAr = [
['0.01','我们美丽的祖国 — 黑鸭子'],
['10.91','所属专辑：我们美丽的祖国'],
['17.91','祝福大家国庆节快乐'],
['22.91','什么地方四季常开鲜艳的花朵'],
['28.57','我们的祖国 美丽的祖国'],
['34.25','亲爱的叔叔阿姨'],
['39.97','像蜜蜂一样辛勤的劳动'],
['45.72','花丛中为我们创造那甜蜜的生活'],
['57.20','啦啦....'],
['72.88','什么地方到处充满幸福和欢乐'],
['78.56','我们的祖国 美丽的祖国'],
['84.27','飘扬的五星红旗'],
['90.04','像朝霞一样绚丽灿烂'],
['95.77','阳光下和我们永远同唱理想之歌'],
['107.22','啦啦....'],
['122.87','什么地方到处充满幸福和欢乐'],
['128.58','我们的祖国 美丽的祖国'],
['134.27','飘扬的五星红旗'],
['140.03','像朝霞一样绚丽灿烂'],
['145.70','阳光下和我们永远同唱理想之歌'],
['157.39','啦啦....']
];
let aud = new Audio(), lrcKey = 0;
aud.src = 'https://music.163.com/song/media/outer/url?id=1985366916.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr);
else continue;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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 showLrc = (text) => {
let tstr = '';
Array.from({length: text.length}).forEach((ele,key) => {
if(text.substr(key,1).trim() != '') tstr += `<span class="lrcChar" style='top: ${ranNum(-10,10)}px; background: #${setColor()}; color: #${setColor()};'>${text.substr(key,1)}</span>`;
});
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
return tstr;
}
let setColor = () => Math.random().toString(16).substr(-6);
let ranNum = (min,max) => Math.floor(Math.random() * (max - min + 1)) + min;
</script>
谢谢.珏分享的图图https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=63487&pid=1730619&fromuid=2
把这图图借用了来做帖子{:4_173:}
祝我们的伟大祖国繁荣富强、欣欣向荣。祝花潮朋友们节日快乐、吉祥如意！祝影子朋友事事开心、事事顺利！
太美了，太美了！画面璀璨夺目、绚丽多彩。影子朋友的美好制作，充分体现了花潮人的心情。尽善尽美、无与伦比。 喜庆的帖子，精美的制作！欣赏！国庆节快乐！ 梦油 发表于 2022-10-1 10:33
祝我们的伟大祖国繁荣富强、欣欣向荣。祝花潮朋友们节日快乐、吉祥如意！祝影子朋友事事开心、事事顺利 ...
多谢梦油鼓励，让我们一起祝贺我们伟大的国73周年花潮{:4_187:} 相约爱晚亭 发表于 2022-10-1 10:54
喜庆的帖子，精美的制作！欣赏！国庆节快乐！
多谢爱晚亭鼓励，祝您节日快乐{:4_187:} 亲爱的。国庆节快乐~~{:4_179:} 热烈庆祝中华人民共和国成立73周年{:4_178:} 耀眼的红，满是喜庆～ 红影 发表于 2022-10-1 11:16
多谢梦油鼓励，让我们一起祝贺我们伟大的国73周年花潮
让我们共祝祖国繁荣富强 小辣椒 发表于 2022-10-1 12:13
亲爱的。国庆节快乐~~
亲爱的，我们一起祝贺祖国73周年华诞{:4_187:} 豆儿 发表于 2022-10-1 13:41
耀眼的红，满是喜庆～
跟豆儿一起祝福我们的祖国{:4_187:} 醉美水芙蓉 发表于 2022-10-1 16:04
喜庆的美景！祝红影美女国庆节快乐！
谢谢水芙蓉美女，国庆快乐{:4_187:} 众多元素共同烘托节日的喜庆，需要心灵手巧。这是很成功的制作。 好喜庆，影子，国庆快乐，花潮的友友们国庆快乐。{:4_204:}{:4_204:} 马黑黑 发表于 2022-10-1 17:55
众多元素共同烘托节日的喜庆，需要心灵手巧。这是很成功的制作。
谢谢黑黑的代码，本来想把那个五角星弄进去，没弄成，只能这样了{:4_173:} 红芍药 发表于 2022-10-1 19:35
好喜庆，影子，国庆快乐，花潮的友友们国庆快乐。
谢谢芍药姑娘，节日快乐{:4_187:} 红影 发表于 2022-10-1 20:25
谢谢黑黑的代码，本来想把那个五角星弄进去，没弄成，只能这样了
东东够多了的 马黑黑 发表于 2022-10-1 20:36
东东够多了的
嗯嗯，热闹欢乐就好{:4_173:}
页:
[1]
2