【月满花潮庆华诞】《东方大国》
本帖最后由 寒冬残荷 于 2025-10-1 16:30 编辑 <br /><br /><style>#papa {position:relative; margin:90px auto 45px calc(50% - 881px); width:1600px;height:900px; box-shadow:3px 3px 20px #000; z-index:1; display:grid; place-items:center;overflow: hidden;}
#vid {position:absolute; z-index: 2;width:100%; height:100%; object-fit:cover; mix-blend-mode:soft-light;margin-top:-30px; transform:rotateX(0deg); pointer-events:none;}
#vido {position:absolute; z-index: 1;width:100%; height:110%; object-fit:cover; mix-blend-mode:soft-light; margin-top:-80px; transform:rotateX(0deg); pointer-events:none;}
#mdiv {z-index: 10; --size: 0px; --color: teal; position: relative; left: calc(-35% - var(--size) / 2); top: 230px; width: var(--size); height: var(--size);display: grid; place-items: center; animation: rot 8s linear infinite ; cursor: pointer;}
#mdiv::before, #mdiv::after { position: absolute; content: '';width: 0; height: 0; border-style: solid; border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px); border-color: var(--color) transparent; border-radius: 100% 100% 100% 100%; filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gra**nt(0deg, #FF0000, #FF0000, #FF0000);
position: absolute;z-index: 6;left: 52%; top: 78%;transform: translate(-50%);font:normal 5em 黑体; font-weight:400;color: #FF0000;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 2px 0 0)drop-shadow(#FFFFFF 0 2px 0)drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#aud{position: absolute; top: 10px; left:10px;opacity:0.1;}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=hT2FjxhFbXkxhhqL&shareuid" autoplay loop controls></audio>
<video id="vido" src= "https://img.tukuppt.com/video_show/2269348/00/02/04/5b4f5a64e014e.mp4" autoplay loop muted></video>
<video id="vid" src="https://cccimg.com/view.php/4bbd251da3228169250e26167e893f2c.mp4" autoplay loop muted ></video>
</div>
<div style="height:60px;"></div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
我们生在这个东方大国
可以安居乐业好好生活
远离战乱之火
远离灾难漩涡
五星红旗永不落
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌
歌曲《东方大国》
翻唱：寒冬残荷
LRC歌词：寒冬残荷
洲际穿天而飞过
绽放最美的烟火
多少辈人的心血
国之荣辱靠你靠我
世界和平传承者
中华大地的美德
天安门前红旗飘
一带一路喜迎来客
我们生在这个东方大国
可以安居乐业好好生活
远离战乱之火
远离灾难漩涡
五星红旗永不落
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌
龙的传人一路高歌
歌曲《东方大国》
翻唱：寒冬残荷
LRC歌词：寒冬残荷
谢谢观看！
`;
/*变量 ：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'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.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); /*获得歌词数组*/
})();
</script>
演绎精彩 正能量满满 歌声唯美动听 感谢寒冬残荷带来的精彩，辛苦了，祝你国庆中秋快乐、阖家幸福。 演唱得非常激情，非常感人！{:4_199:} 气息平稳，音色深厚动听！
问好，节日快乐！ 嗓子好，要多来翻唱哦{:4_176:} 偶然~ 发表于 2025-10-1 18:42
正能量满满
谢谢偶然版主的鼓励和支持！正能量是真的，唱歌就不提了，男人婆 的声音。{:5_106:}就当我是来搞笑的吧！
去了好几个论坛，就这个论坛的系统支持代码最好的。老了没事做，上网看看了也想亲自实践一下。
这个帖子的代码得到的效果就让我好开心，可以说是自娱自乐了！{:5_106:} 樵歌 发表于 2025-10-1 20:02
嗓子好，要多来翻唱哦
谢谢樵歌管理的鼓励和支持！让您见笑了！您和偶然版主的歌我都听了，你们都是专业级别的！
我没学过唱歌，且也不喜欢唱，现老了没事做，听人说唱歌对肺有好处，我就乱喊喊，特别是我的男人婆 喊声很难听，就当我是来搞笑的吧！ 寒冬残荷 发表于 2025-10-1 20:49
谢谢偶然版主的鼓励和支持！正能量是真的，唱歌就不提了，男人婆 的声音。就当我是来搞笑的吧！ ...
开心就好，祝你国庆中秋快乐、阖家幸福~！ 还是寒冬残荷自己的翻唱呢，音画制作好，翻唱更是出彩，太赞了{:4_199:} 寒冬残荷 发表于 2025-10-1 20:57
谢谢樵歌管理的鼓励和支持！让您见笑了！您和偶然版主的歌我都听了，你们都是专业级别的！
我没学过唱 ...
兄台可是太谦虚了哈，虽然听得出来，您的声带和我一样有些老化了，但你的嗓音还是很干净的，音色真的好听！我绝对是真心话！我可以向毛主席保证。
另外，@偶然 是专业的，他词曲唱三位一体，我做不到。
你若会套用代码，那恭喜您——你来对地方了，我可以自豪地说，咱这的代码远行环境是这些综合小众坛子里最好的！因为咱这里有位代码大师@马黑黑 ，没有之一。。。
祝老兄台福寿康宁！歌唱愉快！ 樵歌 发表于 2025-10-2 10:17
兄台可是太谦虚了哈，虽然听得出来，您的声带和我一样有些老化了，但你的嗓音还是很干净的，音色真的好听 ...
{:4_190:} 樵歌 发表于 2025-10-2 10:17
兄台可是太谦虚了哈，虽然听得出来，您的声带和我一样有些老化了，但你的嗓音还是很干净的，音色真的好听 ...
{:5_106:}{:5_106:}{:5_106:}樵管，我一边吃着饭打开电脑来论坛，看到你的这个回复，笑得我把饭都喷到键盘上……
真的从歌声听出我是男人？{:5_106:}{:5_106:} 马黑黑 发表于 2025-10-2 11:59
谢谢马老师！来论坛这里看了你的帖子，我学会了套用代码来制作音画帖子，每次学会一个属性我都好开心，可以说比小时上学读书那会还高兴！
祝你国庆、中秋快乐！阖家幸福！ 马黑黑 发表于 2025-10-2 11:59
这顺风耳名不虚传{:4_170:}{:4_176:} 寒冬残荷 发表于 2025-10-2 20:44
樵管，我一边吃着饭打开电脑来论坛，看到你的这个回复，笑得我把饭都喷到键 ...
难不成听错了{:4_189:} 樵歌 发表于 2025-10-2 22:00
这顺风耳名不虚传
{:4_172:} 寒冬残荷 发表于 2025-10-2 20:51
谢谢马老师！来论坛这里看了你的帖子，我学会了套用代码来制作音画帖子，每次学会一个属性我都好开心，可 ...
学无止境，开心为要
页:
[1]
2