论坛 › 人机音画视频 › 美丽中国-于文华

万顷湖 发表于 2026-7-31 17:54

美丽中国-于文华

本帖最后由 万顷湖 于 2026-7-31 17:59 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_292192">
<br /><br /><div style="position: absolute; left:80px;width:100%;margin-top:0px;">
<style>
#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url('https://free.picui.cn/free/2026/07/31/6a6c6e2bd6214.jpg')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {top:12%; left:5%;cursor: pointer;
        width:200px;text-align:center;animation:rot 10s linear infinite;
        position: absolute;filter:drop-shadow(#000 0px 0 1px);
        z-index: 40;
        }
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}

#qmsvg{ position: absolute;z-index: 3;
      left: 5%;
      top: 5%;
       animation: roto 20s linear infinite ;
}
@keyframes roto {to { transform: rotate(-360deg);filter: hue-rotate(360deg); }}
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gra**nt(black 100% ,transparent 100%);
}
li-zi { position: absolute; top: 0px;z-index: 5; background: linear-gra**nt(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 2.2em 华文琥珀;color: #43AA19;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<div id="mdiv">
        <svg width="100" height="100" viewBox="-160 -160 320 320">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
                </filter>
                <g id="part" filter="url(#shadow)">
                        <line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
                        <ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
                        <ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
                </g>
        </defs>
        <use href="#part"></use>
        <use href="#part" transform="rotate(35)"></use>
        <use href="#part" transform="rotate(70)"></use>
        <use href="#part" transform="rotate(105)"></use>
        <use href="#part" transform="rotate(140)"></use>
</svg>
</div>

<svgid="qmsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="40" fill="#000000"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛欢迎您</textPath>
        </text>
</svg>
<video id="vid" src="" autoplay loop muted></video>
<divid="body" ><li-zi ></li-zi ></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/156473.mp3" autoplay loop></audio>
<script>

let pgs = document.querySelectorAll('polygon');
    function chColor() {
      pgs.forEach(pg => {
            pg.setAttribute('',"#" + Math.random().toString(16).substring(2,8))
      });
    }
    setInterval(chColor, 1000);

mdiv.onclick = () => aud.paused ? (aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
qmsvg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>qmsvg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>qmsvg.style.animationPlayState = 'paused');

</script>
<span id="lrcStr" style="visibility: hidden;">
美丽中国 - 于文华
美丽中国
美丽中国
美丽的中国
美丽是春雨轻声敲打的新绿
美丽是深秋幸福收获的金黄
美丽是流淌快乐甜蜜的江河
美丽是闪烁璀璨梦想的星光
美丽是山水相依的温暖
美丽是日月辉映的悠长
美丽的山哟美丽的水
江山如画国色天香国色天香
美丽是柔和目光流露的自信
美丽是铁骨脊梁挺起的坚强
美丽是驰骋五洲大洋的远航
美丽是遨游宇宙太空的飞翔
美丽是五谷丰登的欢畅
美丽是家和业兴的向往
美丽的你哟美丽的他
爱的热土我的家乡我的家乡
美丽中国山欢水笑
美丽中国凤舞龙翔
美丽中国源远流长
美丽中国撒满阳光
美丽中国撒满阳光撒满阳光
美丽中国中国

</span>
<script >
(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"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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;
                }
      }
});
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); /*获得歌词数组*/
})();
</script>
<script>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: 260}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.5 + Math.random() * 0.5}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);
        });
</script>
</div>
<div style="height:960px;"></div>
<br /><br /><br /><br /><br /><br /></td></tr></table>

梦江南 发表于 2026-7-31 19:04

问好万老师，谢谢精彩分享，音画太棒了！{:4_187:}

梦油 发表于 2026-7-31 19:47

精美的制作无与伦比。俺给一个大大的赞！{:5_116:}
问好万顷湖朋友节日快乐！

红影 发表于 2026-7-31 20:30

这播放器真漂亮，和圆环文字还是不同方向的旋转呢。
歌曲好听，制作漂亮，欣赏万顷湖老师好帖{:4_199:}

万顷湖 发表于 2026-7-31 21:06

梦江南 发表于 2026-7-31 19:04
问好万老师，谢谢精彩分享，音画太棒了！

大驾光临，荣幸之至。谢谢鼓励。

万顷湖 发表于 2026-7-31 21:07

梦油 发表于 2026-7-31 19:47
精美的制作无与伦比。俺给一个大大的赞！
问好万顷湖朋友节日快乐！

一赞值万金，我赚翻了。谢谢鼓励。

万顷湖 发表于 2026-7-31 21:09

红影 发表于 2026-7-31 20:30
这播放器真漂亮，和圆环文字还是不同方向的旋转呢。
歌曲好听，制作漂亮，欣赏万顷湖老师好帖

大驾光临，荣幸之至。谢谢鼓励。

红影 发表于 2026-8-1 08:21

万顷湖 发表于 2026-7-31 21:09
大驾光临，荣幸之至。谢谢鼓励。

您太客气了，再赏您的好帖{:4_187:}

梦油 发表于 2026-8-1 11:20

万顷湖 发表于 2026-7-31 21:07
一赞值万金，我赚翻了。谢谢鼓励。

万顷湖朋友别客气。

查看完整版本: 美丽中国-于文华