【月满花潮庆华诞】金风玉露
本帖最后由 梦江南 于 2025-10-19 15:05 编辑 <br /><br /><style>#papa { margin: 150px 0 20px calc(50% - 700px); background:#800 url(' ')no-repeat center/cover;width: 1250px; height: 700px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {z-index: 10;
--size: 0px;
--color: teal;
position: relative;
left: calc(-35% - var(--size) / 2);
top: 230px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
cursor: pointer;
}
#mdiv::before, #mdiv::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 100% 100% 100% 100%;
filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#vid {z-index: 2;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(black 10% ,transparent 90%);
}
#vido {z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://upfile.mp3.wf/view.php/59c0a4684740507bec66b1980777ba57.mp3" autoplay loop></audio>
<video id="vid" src=" " autoplay loop muted></video>
<video id="vido" src="https://txmov2.a.kwimgs.com/upic/2025/10/19/14/BMjAyNTEwMTkxNDM1MDBfMzg4NDYzMTU1Ml8xNzc3OTAxMzMyMThfMV8z_b_B2ad8575cb277e836e70839bf0cbb46a1.mp4?" autoplay loop muted></video>
</div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<style type="text/css">
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 85%;transform: translate(-50%);font:normal 4em 华文新魏; font-weight:400;color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<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'),mdiv.style.animationPlayState = 'paused') : (lrc.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;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script> 制作真漂亮。这个好像没有小播的？还以为那动图是，点了没反应。
那些跳舞的女子里有一个是金星吧。{:4_173:} 欣赏江南好帖{:4_187:} 很漂亮的帖子
{:4_178:} 红影 发表于 2025-10-19 16:01
制作真漂亮。这个好像没有小播的？还以为那动图是，点了没反应。
那些跳舞的女子里有一个是金星吧。{:4_17 ...
问好影子，这帖是没有小播的。动图是豆包做的。穿黑衣的美女被你一说，看看是有点像金星。{:4_173:} 红影 发表于 2025-10-19 16:02
欣赏江南好帖
我积极争取做20帖，还差一帖。赚钱呢。{:4_189:} 澜天 发表于 2025-10-19 16:41
很漂亮的帖子
问好澜天，谢谢欣赏支持。{:4_204:} 我喜欢这样的字幕，看起来十分清楚。 这个还有动态的跳舞，应该复杂点。很漂亮！{:4_199:} 梦油 发表于 2025-10-19 17:20
我喜欢这样的字幕，看起来十分清楚。
问好梦油，字幕是根据帖子代码来做的。谢谢欣赏。{:4_204:} 漫云儿 发表于 2025-10-19 17:24
这个还有动态的跳舞，应该复杂点。很漂亮！
问好漫云儿，谢谢欣赏。一点不复杂，动图是豆包做出来的。{:4_204:} 梦江南 发表于 2025-10-19 17:36
问好梦油，字幕是根据帖子代码来做的。谢谢欣赏。
做得很好。{:5_116:} 阿姨又出新的创意制作了{:4_199:} 梦油 发表于 2025-10-19 17:39
做得很好。
谢谢鼓励。{:5_108:} 小辣椒 发表于 2025-10-19 17:53
阿姨又出新的创意制作了
小辣椒，阿姨争取做20帖，还差一帖了。{:4_187:} 梦江南 发表于 2025-10-19 18:06
小辣椒，阿姨争取做20帖，还差一帖了。
阿姨别太累。{:4_179:} 小辣椒 发表于 2025-10-19 18:10
阿姨别太累。
知道了，时间还有，有你真好。我下了。多保重 ！{:5_150:} 音画唯美 音质有待提高，估计是手机翻录的 背景歌曲好听！我听的都醉了！