沈阳啊沈阳，我的故乡-李玲玉

万顷湖 发表于 2026-6-27 16:15

本帖最后由万顷湖于 2026-8-21 14:34 编辑 <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/08/09/6a77ef6873bc0.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/157225.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-6-27 18:56

问好老师，欣赏老师的精美音画。{:4_199:}

红影发表于 2026-6-27 21:55

新一代军人的新风貌。
欣赏万顷湖好帖{:4_187:}

万顷湖 发表于 2026-6-27 22:17

梦江南发表于 2026-6-27 18:56
问好老师，欣赏老师的精美音画。

自表二百五，并非花一朵。再获十三点，依然人不火。谢谢梦江南抬举。

万顷湖 发表于 2026-6-27 22:18

红影发表于 2026-6-27 21:55
新一代军人的新风貌。
欣赏万顷湖好帖

自表二百五，并非花一朵。再获十三点，依然人不火。谢谢虹影抬举。

红影发表于 2026-6-28 19:06

万顷湖发表于 2026-6-27 22:18
自表二百五，并非花一朵。再获十三点，依然人不火。谢谢虹影抬举。

火不火的能有什么，日子还是照样过{:4_204:}

页: [1]

花潮论坛's Archiver

沈阳啊沈阳，我的故乡-李玲玉