《春暖花开》 - 周艳泓 - 音乐沙龙 - 花潮论坛

亦是金 发表于 2026-2-4 15:31

《春暖花开》 - 周艳泓

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1891512">
<style>
#papa {
margin: 50px -310px;
width: 1220px;
height: 720px;
background:url() no-repeat center/100% 100%;
position: relative;
overflow: hidden;
border-radius: 22px;
border: thick double#88abfa;
z-index: 12345;
}

#cndpt{
margin: 0px 0px ;
z-index: 10;
mix-blend-mode: lighten;
cursor: pointer;
position:relative;
width: 1200px;
height: 700px;
transform: rotatez(0deg)rotateX(0deg);
background: url(yanhua01.gi)no-repeat center/100% 100%;
}

#enopg{
position: relative;
width: 100%;
height: 100%;
top:0px;
left:0px;

background: url() no-repeat center/100% 100%;
display:none;
}

#vid1{
width: 100%;
height: 100%;
z-index: -1;
position:absolute;
top:0px;
left:0px;

object-fit: cover;
pointer-events: none;
}
.vid{
width: 100%;
height: 100%;
z-index: -2;
position:absolute;
top:0px;
left:0px;
border-radius: 20px;
border: 2px solid #000;
opacity: 0;
object-fit: cover;
pointer-events: none;
animation: round 10s linear infinite ;
}
@keyframes round {
0% {opacity: 0;}
4% {opacity: 1;}
10% {opacity: 1;}
15% {opacity: 0;}
}

.vid:nth-child(1){animation-delay: 10s;}

.stop .vid:nth-child(1), {}

css-doodle { position: absolute; }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 5%;
font:normal 3.0em 华文新魏;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);

-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}

@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10 {
position: absolute;
width: 100%;
height: 100%;
left: 10%;
top: 50%;
   width: 43px;
height: 5px;
border-radius: 50%;
background:#00ff00;
box-shadow: 0px 0px 10px #ff0000;
--time: .4s;
animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}

#clone_player0 { --time: 5.4s; left: 5%; top: 90%; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 78%; top: 92%; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 85%; top: 80%; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 70%; top: 93%; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 60%; top: 84%; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 50%; top: 80%; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 40%; top: 91%; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 31%; top: 85%; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 93%; top: 86%; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 22%; top: 94%; filter: hue-rotate(20deg);}
#clone_player10 { --time: 0.4s; left: 15%; top: 88%; filter: hue-rotate(60deg); }
@keyframes rotating {
from { transform: translate(0,0px) rotate(0deg)scale(1);}
to { transform: translate(0px,-80px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}

</style>

<style type="text/css">

#baiBox {
   margin: auto;
   width: 700px;
   text-align: center;
   font-family:华文新魏;
   font-size: 2.5rem;
   font-weight: bold;
   color: #f73dfa;
   transform-origin: top;
   animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
   from{transform: perspective(800px) rotatex(30deg); }
   to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: absolute;width: 500px;height: 50px;top: 30px;LEFT: 250px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552) }
#tit:hover { color: green; }
/*标题位置移动范围设置*/

</style>

<div id="papa">
<div id="cndpt">

   <div id="clone_player0"></div>
<div id="clone_player1"></div>
<div id="clone_player2"></div>
<div id="clone_player3"></div>
<div id="clone_player4"></div>
<div id="clone_player5"></div>
<div id="clone_player6"></div>
<div id="clone_player7"></div>
<div id="clone_player8"></div>
   <div id="clone_player9"></div>
   <div id="clone_player10"></div>


<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:0px;">《金风玉露》</span>
<span style="color:#1e5bf6;"><span style="font-size:0px;">- 旅行新蜜蜂</span></div>

</div>

<div style="position: absolute;width: 300px;height: 30px;top: 91%;LEFT: 82%;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/16/86/V-168690-EB208AEF.mp4" loop muted autoplay=""></video>

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/12/68/V-126813-9655CF1F.mp4" loop muted autoplay=""></video>

</div>

<div id="lrc" data-lrc="">《春暖花开》 - 周艳泓</div>

<div id="mplayer">

<css-doodle grid="6" id="">
:doodle {
@size: 0px;
@shape: circle;
left: 6%;
top: 75%;
cursor: pointer;
z-index: 2;
   background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg1.png)0 0/100% 100%;
animation: rot 6s infinite linear forwards var(--state);
}
@keyframes rot { to { transform: rotate(360deg);filter:hue-rotate(360deg)} }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=337026.mp3" autoplay loop></audio>

</div>

<script>
(function(){
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
   aud.addEventListener('seeked', () => calcKey());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
FS({
            pa: papa,

set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 88%; left: 86%; font:normal 1.8em 华文楷体;',
   });
</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《春暖花开》 - 周艳泓
词曲: 浮克
演唱：周艳泓
歌词编辑：亦是金
。。。。。。
春季已准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿已竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
。。。。。。
春季已准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿已竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川

-- 谢谢欣赏 --

`;

/*变量：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>

<script >

(function() {
   const vids = document.querySelectorAll('#vid1');
   var mState = () => {
      vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
   };
   aud.onplaying = aud.onpause = () => mState();
   })();
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};
</script >
<script >
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script >

<css-doodle grid="16" id="fFloat">
:doodle {
@size: 0px 680px;
}
position: absolute;
left: @r(255)%;
top: -10%;
:after {
position: absolute;
content: '@p( ♬, ♪, ♩,♫, ∮,开心, ✲,❤, ☺, 美美哒, ★, ☆,love, ❄)';
color: @p(#ff0000,#ff0ff1,#f8a21b,#2bff0f,#1cdcf8,#5445ea,#faa615);
font-size: @r(25, 40)px;
}
animation: fall 40s @r(-6, 36)s infinite var(--state);
@keyframes fall {
from { transform: rotate(0deg) translate(0px); }
to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
}
</css-doodle>

<css-doodle grid="20">
:doodle {@size: 1200px 700px;margin: 0% 0%;} @grid: 50x1 / 1200px 700px;
:container {    perspective: 10vmin; }
pointer-events: auto;
background: @m(@r(30, 30),radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%,    transparent 20% )
@r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
@size: 30%; @place-cell: center;
border-radius: 50%;
transform-style: preserve-3d; animation: scale-up 15s linear infinite var(--state); animation-delay: calc(@i * -.6s);
@keyframes scale-up {    0% { opacity: 0;    transform: translate3d(0, 0, 0) rotate(0);    }    10% {       opacity: 1;    }    95% {    transform:       translate3d(0, 0, @r(50vmin, 55vmin))       rotate(@r(-360deg, 360deg)); }100% {    opacity: 0;    transform: translate3d(0, 0, 1vmin); } }
</css-doodle>

<div id="enopg">
</td></tr></table>

<DIV style="HEIGHT: 50px">

梦江南 发表于 2026-2-4 15:38

欣赏老师精彩的音画，好听的歌曲。立春安康！{:4_187:}

霜染枫丹 发表于 2026-2-4 17:02

热烈的节奏，带来了春天的快乐！欣赏亦是金佳作，立春快乐！！

https://www.huachaowang.com/forum.php?mod=attachment&aid=NDg1NDd8ODYwY2M2ZWZ8MTc3MDE5NDc2NXw3OTg1fDkwMzA4&noupdate=yes

亦是金 发表于 2026-2-4 17:40

梦江南发表于 2026-2-4 15:38
欣赏老师精彩的音画，好听的歌曲。立春安康！

谢谢欣赏点赞！{:4_187:}

亦是金 发表于 2026-2-4 17:40

霜染枫丹发表于 2026-2-4 17:02
热烈的节奏，带来了春天的快乐！欣赏亦是金佳作，立春快乐！！

问好！谢谢欣赏，立春快乐！{:4_187:}

红影发表于 2026-2-4 22:30

视频里那么多美丽的花朵，春暖花开是令人喜悦的季节。
欣赏亦是金老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

《春暖花开》 - 周艳泓