论坛 › 欢乐水吧 › 【花潮贺岁】云雾山间 歌手：尹昔眠

小辣椒 发表于 2026-2-26 20:33

【花潮贺岁】云雾山间 歌手：尹昔眠

<style>
#papa {margin: 130px 0 20px calc(50% - 731px);width: 1306px; height: 745px; background: lightblue url('https://wj.zp68.com/lxx/yunhua/2026/02/26/02.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 45%; top: 60px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: green; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 50px; height: 50px; left: -100px; border-radius: 50%; background: url('https://xlaj.cn/assets/file/zp/20230408162600.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
#svg { position: absolute; font: bold 6em sans-serif; }
.text { fill: none; stroke-width: 3; stroke-dasharray: 0 300; stroke-dashoffset: 0; }
.text:nth-child(3n + 1) { stroke: Gray; animation: stroke1 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 2) { stroke:         orange; animation: stroke2 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 3) { stroke: Teal; animation: stroke3 30s ease-in-out infinite alternate; }
.text:hover { fill: teal; opacity: .45; }

@keyframes stroke1 { to { stroke-dashoffset: 1000; stroke-dasharray: 80 160; } }
@keyframes stroke2 { to { stroke-dashoffset: 1080; stroke-dasharray: 80 160; } }
@keyframes stroke3 { to { stroke-dashoffset: 1160; stroke-dasharray: 80 160; } }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
#dt1{ position: absolute; width: 600px; height: 400px; top:200px;; left: 280px; }

</style>

<div id="papa">
        <svg id="svg" width="1400" height="800">
                <symbol id="s-text"><text text-anchor="middle" x="20%" y="65%" dy=".25em">云雾山间</text></symbol>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>

<img id="dt1" src="https://xlaj.cn/assets/file/zp/20230408162718.gif" alt="" />


      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230408193259.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
</script>

杨帆 发表于 2026-2-26 21:03

漂亮~祝小辣椒新春快乐马年大吉大利{:4_204:}

也曾年轻 发表于 2026-2-26 21:26

https://p2.itc.cn/q_70/images03/20220708/387404f772db440e87cd8604d26c6e5d.gif

马黑黑 发表于 2026-2-26 22:02

{:4_199:}

偶然~ 发表于 2026-2-26 22:44

小辣椒老师的音画作品《云雾山间》，宛如一首悠扬的山水诗篇，缓缓流淌进观者的心田！

偶然~ 发表于 2026-2-26 22:45

画面里，白衣女子身姿绰约，手持鲜艳红帽，静立于云雾弥漫的山间，宛如仙子下凡，亭亭玉立。

偶然~ 发表于 2026-2-26 22:46

那缥缈的云雾，连绵的山峦，与女子的宁静悠然相得益彰，构成了一幅如梦似幻的绝美画卷。

偶然~ 发表于 2026-2-26 22:47

而背景音乐的搭配更是精妙，尹昔眠的歌声仿佛从云端飘来，与画面完美融合，将山间的空灵与静谧展现得淋漓尽致。

偶然~ 发表于 2026-2-26 22:48

每一个音符都像是跳动的精灵，在云雾间穿梭嬉戏，诉说着山间的故事。

偶然~ 发表于 2026-2-26 22:49

此作品不仅展现了小辣椒老师卓越的艺术才华，更传递出一种远离尘世喧嚣、回归自然的宁静与美好。

偶然~ 发表于 2026-2-26 22:50

在花潮论坛的【花潮贺岁】活动中能欣赏到如此佳作，实乃一大乐事。

偶然~ 发表于 2026-2-26 22:51

愿小辣椒老师如骏马般自由奔放，在艺术的天地里尽情驰骋，创作出更多令人惊艳的作品。

偶然~ 发表于 2026-2-26 22:51

大年初十，十全十美！
祝小辣椒和家人：
十分吉祥、十分平安
十分开心、十分甜蜜
十分幸福、十分如意
十分健康、十分快乐
十分顺心、十分圆满

红影 发表于 2026-2-26 23:28

这制作漂亮，欣赏亲爱的好帖{:4_187:}

未知名 发表于 2026-2-27 08:43

凡是小辣椒做的，选 的歌好听，画儿好年，播放器好，音质一流{:4_205:}

梦江南 发表于 2026-2-27 13:05

这音画清雅，有意境，特别是这顶红帽子，非常耀眼。歌曲也好听。赞！{:4_187:}

梦江南 发表于 2026-2-27 13:10

这个云雾山间的标题很特别，动态像跳舞一样。匠心独运！{:4_204:}{:4_178:}

小辣椒 发表于 2026-2-28 22:37

杨帆 发表于 2026-2-26 21:03
漂亮~祝小辣椒新春快乐马年大吉大利

谢谢杨帆，感谢支持，同祝杨帆马年大吉，幸福快乐！

小辣椒 发表于 2026-2-28 22:38

也曾年轻 发表于 2026-2-26 21:26


老师晚上好，谢谢欣赏支持{:4_187:}

小辣椒 发表于 2026-2-28 22:39

马黑黑 发表于 2026-2-26 22:02


黑黑还记得这个以前的蚯蚓字吗，失效重新复习做一次

查看完整版本: 【花潮贺岁】云雾山间 歌手：尹昔眠