论坛 › 欢乐水吧 › 我爱你中国

醉美水芙蓉 发表于 2023-10-2 21:47

我爱你中国

本帖最后由 醉美水芙蓉 于 2023-10-2 21:47 编辑 <br /><br />   <style>
#papa { margin: 150px 0 0 calc(50% - 720px);width: 1280px; height: 680px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/089dcd940725c9f59ad31579b9235dc6.mp4.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:50%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('https://imgessl.kugou.com/stdmusic/20191010/20191010005941962457.jpg') 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: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
li-zi { position: absolute; top: 100%; box-shadow: 0 0 15px 0 lightgreen inset; border-radius: 50% 50% 25% 50%; transform: rotate(45deg); animation: fly var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes fly { to { top: -100%; } }
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e8f1516f45ba8024be7b785530b499ba_preview.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music186589844.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: 0%;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: 50}).forEach((item) => {
                item = document.createElement('li-zi');
                let size = 15 + Math.ceil(Math.random() * 20);
                item.style.cssText += `
                        --dur: ${20 + Math.random() * 10}s;
                        --delay: -${Math.random() * 20}s;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${Math.random() * 100}%;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                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 = `李如意 - 我爱你中国 (天籁童声版)
作词：瞿琮
作曲：郑秋枫
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'),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>

红影 发表于 2023-10-2 22:20

很热烈美好的贺帖。跟水芙蓉美女一起祝福我们伟大的祖国74周年华诞{:4_177:}

小辣椒 发表于 2023-10-2 22:29

漂亮的制作，这个效果也是挺美美的{:4_199:}

小辣椒 发表于 2023-10-2 22:29

欣赏水芙蓉精彩的制作

醉美水芙蓉 发表于 2023-10-2 23:09

红影 发表于 2023-10-2 22:20
很热烈美好的贺帖。跟水芙蓉美女一起祝福我们伟大的祖国74周年华诞

谢谢红影美女点评！一起祝福祖国繁荣昌盛！

醉美水芙蓉 发表于 2023-10-2 23:09

小辣椒 发表于 2023-10-2 22:29
漂亮的制作，这个效果也是挺美美的

谢谢小辣椒欣赏点评！

世外桃源 发表于 2023-10-3 09:46

欣赏欣赏

红影 发表于 2023-10-3 10:44

醉美水芙蓉 发表于 2023-10-2 23:09
谢谢红影美女点评！一起祝福祖国繁荣昌盛！

嗯嗯，跟水芙蓉美女一起祝福我们伟大的祖国{:4_178:}

醉美水芙蓉 发表于 2023-10-3 20:48

世外桃源 发表于 2023-10-3 09:46
欣赏欣赏

谢谢朋友支持！

查看完整版本: 我爱你中国