爱我中华
<style>
#papa { margin: 150px 0 0 calc(50% - 720px);width: 1280px; height: 680px; background: url('https://i.mp3.wf/view.php/ed65cbe8b61e86ed68b3a18f395dfdfb.jpg ') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#img_border{width:40%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('https://i.mp3.wf/view.php/17df9ec690e40d610f665086b97e269d.gif ') no-repeat center/cover;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(60deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}}
#vid { position: absolute; width: 100%; height: 120%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
li-zi { position: absolute; top: 0; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 100%; } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/19/79/5f1508601e6ff.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/08/21/awzh.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/oscpp_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [];
script.onload = () => {
HCPlayer({papa: '#papa',
lrcAr: geci,
lrc_css: 'filter:drop-shadow(#ffffff 0.5px 0 0)drop-shadow(#ffffff 0 0.5px 0)drop-shadow(#ffffff -0.5px 0 0) drop-shadow(#ffffff 0 -0.5px0); font:normal 3em 华文新魏; --bg: #800000;top:10%; color: #000080;',
fs_css: 'top: 10%; right: 10%;color: #ddd; background: #c884af;',
player_css: `
bottom: 20%;left: 32%;
--discBg:url('https://i.mp3.wf/view.php/2af78783c01b40a0e2f2c97f96830998.gif') no-repeat center/cover;
--discSize: 40px;
--hh: 120px;
`,
pinpu: {num: 300, size: 1, gap: 0.5, color1: '#ff0000', color2: '#ffffff'},
});
};
})();
Array.from({length: 70}).forEach((item) => {
item = document.createElement('li-zi');
item.style.cssText += `
--dur: ${0.4 + Math.random() * 0.4}s;
--delay: ${Math.random() * -0.8}s;
width: ${1 + Math.round(Math.random())}px;
height: ${8 + Math.random() * 30}px;
left: ${Math.random() * 100}%;
`;
papa.appendChild(item);
});
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `爱我中华--宋祖英
作词 : 乔羽
作曲 : 徐沛东
爱我中华 爱我中华
赛罗罗赛罗罗赛罗罗赛罗罗赛罗罗 嘿
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
爱我中华 健儿奋起步伐
爱我中华 建设我们的国家
爱我中华 中华雄姿英发
爱我中华 五十六族 兄弟姐妹
五十六种语言汇成一句话 爱我中华
热烈庆祝中华人民共和国74周年华诞
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
爱我中华 健儿奋起步伐
爱我中华 建设我们的国家
爱我中华 中华雄姿英发
爱我中华 五十六族 兄弟姐妹
五十六种语言汇成一句话
爱我中华 嘿
`;
/*变量 ：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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>
祝花潮的兄弟姐妹们国庆节快乐！ 爱我中华，热烈庆祝建国74周年华诞{:4_178:} 这视频放大的做法真有趣。欣赏冬小雨好帖。同祝伟大祖国华诞{:4_374:} 爱我中华，建设我们伟大国家{:4_178:} 伟大的社会主义祖国万岁！
冬雨金朋友节日快乐！ 红影 发表于 2023-10-1 10:36
这视频放大的做法真有趣。欣赏冬小雨好帖。同祝伟大祖国华诞
美女，现在冬雨已经凹凸了，不能和你们比了，啥啥都做不好了 红影 发表于 2023-10-1 10:37
爱我中华，建设我们伟大国家
{:4_374:}
美女国庆节快乐！ 梦油 发表于 2023-10-1 10:38
伟大的社会主义祖国万岁！
冬雨金朋友节日快乐！
谢谢梦油先生，国庆节快乐！{:4_374:} 同祝建国74周年华诞！{:4_187:}问好冬雨！ 国庆节快乐！ 冬天的雨 发表于 2023-10-1 10:41
谢谢梦油先生，国庆节快乐！
冬雨朋友别客气。{:5_108:} {:4_199:} 好制作！{:4_187:}{:4_187:}{:4_187:} 欣赏冬雨的好制作，特别美女漂亮{:4_173:} 冬雨国庆节快乐！ 冬天的雨 发表于 2023-10-1 10:40
美女，现在冬雨已经凹凸了，不能和你们比了，啥啥都做不好了
冬小雨太谦虚了，你这么谦虚不怕胖么{:4_173:} 冬天的雨 发表于 2023-10-1 10:41
美女国庆节快乐！
举国同欢的日子，大家一起快乐{:4_187:} 冬雨节日快乐