【月满花潮庆华诞】中国威武

杨帆发表于 2025-10-1 15:47

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国威武（热血版）</title>
</head>
<body>
<style>
#papa { margin: 130px 0 20px calc(50% - 721px); background: rgba(173, 255, 47, .5); background-blend-mode: lighten; width: 1280px; height: 780px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; user-select: none; --state: running; }
#fullscreen { position: absolute; left: 20px; top: 20px; padding: 6px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; pointer-events: auto; z-index: 10; opacity: 1; transition: opacity 0.3s ease; }
#tit { position: absolute; z-index: 5; width: 60px; top: 18%; right: 4%; font: 500 2.5em/1.5em 华文隶书; color: transparent; background-image: linear-gradient(180deg, #fff, #00ff00, #fff000); background-size: 100px 400px; font-weight: bold; writing-mode: vertical-rl; -webkit-background-clip: text; animation: wenzi 10s linear infinite alternate var(--state); }
@keyframes wenzi { 0% { background-position: 0px -2500px; } 100% { opacity: 1; background-position: 0px -1000px; } }
#vid2 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: .5; z-index: 1; }
#vid3 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; object-fit: cover; pointer-events: none; opacity: .99; }
#pic { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; mix-blend-mode: darken; z-index: 1; }
#pic img { height: 100%; width: 100%; }
#prog { position: absolute; cursor: pointer; opacity: .8; top: 40%; right: -10%; width: 25%; height: 6px; transform: rotate(-90deg); border-radius: 3px; border: none; color: #FFD700; background: rgba(255, 255, 255, 0.2); z-index: 2; display: var(--display); --display: inline; }
#prog::-webkit-progress-bar { background-color: #E6E6FA; }
#prog::-webkit-progress-value { background-color: #FFD700; }
#prog::-moz-progress-bar { background-color: #FFD700; }
#prog:hover::-webkit-progress-value { background: #FFC107; transition: background .2s ease; }
#prog:active::-webkit-progress-value { transform: scaleX(1.02); }
#player { position: absolute; right: 2%; top: 3%; width: 100px; height: 100px; border: 5px solid Azure; border-radius: 50%; z-index: 10; display: grid; place-items: center; cursor: pointer; }
#player:hover { transform: scale(1.2); animation-play-state: paused; }
.leaf { position: absolute; opacity: 1; width: 80%; height: 80%; transition: .5s; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: #fff000; transform-origin: 200% 200%; animation: spin 0.15s infinite linear var(--state), sway .8s linear infinite alternate var(--state); }
@keyframes spin { 0% { transform: rotate(0deg); filter: hue-rotate(360deg); } }
@keyframes sway { to { transform: rotate(1deg); } }
.intro { margin: 0; width: 100%; height: 100%; position: absolute; background: url('https://pic1.imgdb.cn/item/68dbe535c5157e1a884b078d.png') no-repeat 50% 50%/100% 100%, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde); background-size: cover; background-blend-mode: hard-light; animation: hue-rotate 10s linear infinite var(--state); z-index: 1; }
@keyframes hue-rotate { 5% { transform: scale(1); opacity: 1; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(8); opacity: 0; } }
#lrc { left: 10%; top: 80%; }
#lrcc { left: 90%; transform: translate(-102%); top: 85%; }
#lrc, #lrcc { --motion: cover2; --tt: 2s; --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%); position: absolute; z-index: 6; font: normal 2.5em 华文行楷; color: #222222; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0); }
#lrcc::before, #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); } }
</style>
<div id="papa">
<div id="tit">中国威武（热血版）</div>
<progress id="prog"></progress>
<img id="pic" src="https://pic1.imgdb.cn/item/68dbe766c5157e1a884b0b22.png" alt="" />
<div class='intro'></div>
<div id="player">
<span class="leaf"></span></div>
<span id="fullscreen">全屏观赏</span>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/26/15/03/40/video67e3a6cc9b296.mp4" autoplay loop muted></video>
<video id="vid3" src="https://upfile.mp3.wf/view.php/3c69e59e6930ebbbbd34b5ffb3231fc6.mp4" autoplay loop muted></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2738852992.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
中国威武（热血版）-曹艺馨万海东
作词：周洪
作曲：吴天世
编曲：吴天世
录音：浩歌文化
混音：王浩
制作人：译海文化
OP：曹艺馨
发行：译海文化
万：
五千年的征途风雨无阻
五十六个民族同甘共苦
曹：
俯看万里长城巨龙出入
响彻世界就是中国功夫
万：
开启海上丝绸一带一路
神舟伴随天宫龙飞凤舞
曹：
冲上云霄创造中国速度
赞享太平盛世安康幸福
合：
天生的傲骨中国威武
心热如初为梦想追逐
担负重任大展宏图
复兴之路实现中国梦
强国强军中国威武
未来的路让自己做主
中国之梦永不停步
风流人物看东方日出
万：
五千年的征途风雨无阻
五十六个民族同甘共苦
曹：
俯看万里长城巨龙出入
响彻世界就是中国功夫
万：
开启海上丝绸一带一路
神舟伴随天宫龙飞凤舞
曹：
冲上云霄创造中国速度
赞享太平盛世安康幸福
合：
天生的傲骨中国威武
心热如初为梦想追逐
担负重任大展宏图
复兴之路实现中国梦
强国强军中国威武
未来的路让自己做主
中国之梦永不停步
风流人物看东方日出
天生的傲骨中国威武
心热如初为梦想追逐
担负重任大展宏图
复兴之路实现中国梦
强国强军中国威武
未来的路让自己做主
中国之梦永不停步
风流人物看东方日出
</span>
</div>
<script>
var mState = () => {
papa.style.setProperty('--state', ['running','paused'][+aud.paused]);aud.paused ?(vid2.pause(),vid3.pause()):(vid2.play(), vid3.play());
player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
let fs = true;
let fsTimer;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
</script>
</body>
</html>

梦江南 发表于 2025-10-1 17:19

气派、威武，祝杨帆国庆节快乐！{:4_199:}

梦油发表于 2025-10-1 17:36

强大的中国屹立在世界之巅。

杨帆发表于 2025-10-1 17:55

梦江南发表于 2025-10-1 17:19
气派、威武，祝杨帆国庆节快乐！

问好江南，祝国庆快乐{:4_204:}

杨帆发表于 2025-10-1 17:57

梦油发表于 2025-10-1 17:36
强大的中国屹立在世界之巅。

问好梦油超版，共祝愿祖国永远繁荣昌盛！{:4_199:}

偶然~ 发表于 2025-10-1 18:48

音画唯美

偶然~ 发表于 2025-10-1 18:49

制作大气

偶然~ 发表于 2025-10-1 18:49

歌曲大气磅礴

偶然~ 发表于 2025-10-1 18:50

感谢杨帆带来的精彩，辛苦了，祝你国庆中秋快乐、阖家幸福。

樵歌发表于 2025-10-1 19:45

恢宏大气的作品，震憾人心啦！{:4_178:}

樵歌发表于 2025-10-1 19:46

节日快乐！{:4_176:}

杨帆发表于 2025-10-1 19:48

偶然~ 发表于 2025-10-1 18:50
感谢杨帆带来的精彩，辛苦了，祝你国庆中秋快乐、阖家幸福。

问好偶然~版主，感谢策划这次有意义的活动，感谢对帖子的雅评与鼓励，祝福兄弟国庆快乐{:4_191:}

梦油发表于 2025-10-1 19:51

杨帆发表于 2025-10-1 17:57
问好梦油超版，共祝愿祖国永远繁荣昌盛！

杨帆朋友节日快乐！

杨帆发表于 2025-10-1 20:01

樵歌发表于 2025-10-1 19:45
恢宏大气的作品，震憾人心啦！

谢谢樵歌管理员鼓励，共祝福祖国永远繁荣昌盛！{:4_199:}

杨帆发表于 2025-10-1 20:51

梦油发表于 2025-10-1 19:51
杨帆朋友节日快乐！

问好梦油朋友，祝福节日快乐{:4_190:}

偶然~ 发表于 2025-10-1 21:02

杨帆发表于 2025-10-1 19:48
问好偶然~版主，感谢策划这次有意义的活动，感谢对帖子的雅评与鼓励，祝福兄弟国庆快乐

红影策划的，祝你开心幸福

杨帆发表于 2025-10-1 21:58

偶然~ 发表于 2025-10-1 21:02
红影策划的，祝你开心幸福

谢谢红影，谢谢偶然~，谢谢各位管理人员，辛苦了{:4_190:}

红影发表于 2025-10-1 22:52

作品十分豪气，令人自豪的歌曲。欣赏扬帆好帖，同祝双节快乐{:4_199:}

杨帆发表于 2025-10-1 22:59

红影发表于 2025-10-1 22:52
作品十分豪气，令人自豪的歌曲。欣赏扬帆好帖，同祝双节快乐

谢谢影子鼓励，祝双节快乐{:4_204:}

页: [1]

花潮论坛's Archiver

【月满花潮庆华诞】中国威武