小辣椒 发表于 2025-12-23 21:08

遇上你是我的缘 （学习黑黑雾色山脉播放器效果）


<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
        .pa { --offsetX: 81px; --bg: url('https://wj.zp68.com/lxx/yunhua/2023/08/17/3IF.gif') no-repeat center/cover; }
        .title-text { font-size: 40px; cursor: pointer; transition: .5s; animation: flash .5s infinite alternate var(--state); }
               .fadeInLrc { right: 45%; top:10%;}
        .title-text:hover { transform: scale(1.2) rotate(15deg); }
        .pd-vid { opacity: 1; clip-path: polygon(0 0,50% 20%,100% 0,100% 100%, 50% 80%, 0 100%); }
</style>

<div id="pa" class="pa"></div>

<script type="module">
                                          
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
        const tz = TZ.TZ('pa');
const hcLrc = tz.lrc2HC(`演唱：叶凡\r\n轻轻回首间 白云已走远\r\n带走我的思念 岁岁又年年\r\n青山立两旁 白云为伴\r\n拨动我的心弦 一遍又一遍\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘《游龙惊凤》片尾曲\r\nLRC编辑：小辣椒\r\n轻轻回首间 白云已走远\r\n带走我的思念 岁岁又年年\r\n青山立两旁 白云为伴\r\n拨动我的心弦 一遍又一遍\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n]`);       
        tz.add('audio', '', '', {src: 'https://wj.zp68.com/lxx/yunhua/2022/07/03/ysnswdy.mp3'});
        tz.add('video', '', 'pd-vid', {src: 'https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp'});
                tz.lrc(hcLrc, '', true);
        tz.add('div', 'player', 'wrap100', {style: 'right:37%; bottom: 7%'});
        const txtAr = '遇上你是我的缘'.split(''); // 帖子标题按字拆分为数组
        // 按标题字数获取外切园上半部各字所在标签的位置
        const pos = tz.ringPos(txtAr.length, {cx:50, cy: 50, r1: 180, r2: 100, a: 180, startA: -180, offsetX: 25});
        // 输出半圆弧状标题
        pos.forEach((p, k) => {
                tz.add('span', '', 'title-text', {style: `left: ${p}px; top: ${p}px; color: ${tz.colorHSL()}`})
                  .text(txtAr)
                  .to(player)
                  .playmp3();
        });
       
        tz.bgprog().style('width: 220px;height: 4px; right:32%; bottom: 25px; color: cyan');
       
        tz.fs().style('right: 14%;top:10px' );
</script>

小辣椒 发表于 2025-12-23 21:12

@马黑黑
黑黑旧图旧的音乐做一个，主要是实践一次。

播放器就是标题了，我就没有加标题字上去了

看见一样的歌词js，就加了彩色歌词上去了


小辣椒 发表于 2025-12-23 21:13

遇上你是我的缘《游龙惊凤》片尾曲

马黑黑 发表于 2025-12-23 21:26

非常漂亮

樵歌 发表于 2025-12-23 21:56

不得了，各种技术之集成，特别是那电视还有演员播放演唱。。。不知道怎么捣鼓出来的{:4_178:}

红影 发表于 2025-12-23 22:01

这个漂亮，很温馨的场景，歌词同步在这样的背景下特别清晰。
欣赏亲爱的好帖{:4_199:}

梦江南 发表于 2025-12-24 07:56

很温馨的画面，融进了多种元素，小辣椒好棒！{:4_187:}

梦油 发表于 2025-12-24 09:54

是缘分把我们聚在了花潮论坛。

偶然~ 发表于 2025-12-24 11:23

小辣椒美女制作的《遇上你是我的缘（学习黑黑雾色山脉播放器效果）》音画作品，将歌曲与视觉艺术巧妙融合，营造出沉浸式的情感体验

偶然~ 发表于 2025-12-24 11:24

音画交融，让旋律在画面中流淌，小辣椒以《遇上你是我的缘》为蓝本，通过“雾色山脉”播放器效果，将听觉与视觉艺术无缝衔接。

偶然~ 发表于 2025-12-24 11:26

画面中，人物剪影与山水意境呼应，光影流转间，笛子前奏的悠远与歌词“高山下的情歌，是这弯弯的河”的意境浑然一体，仿佛能看见河水在山谷间蜿蜒，听见心事随旋律起伏。这种“以画释曲”的巧思，让抽象的旋律有了具象的落点，每一帧都像一首无声的诗。

偶然~ 发表于 2025-12-24 11:28

作品对情感的捕捉尤为细腻，当歌词唱到“我的心在那河水里游”时，画面中人物的神态与背景的流动感相互映衬，将“绵绵缠意”具象化为视觉语言，而“守望你是我的歌”的收尾，配合光影的渐变，又让思念的绵长有了可感知的韵律。

偶然~ 发表于 2025-12-24 11:30

情感共鸣，在细节中触摸温度，这种“音画同步”的精准把控，让听众不仅“听见”了歌曲，更“看见”了情感的流动，仿佛与创作者一同沉入那片“苍翠山脉”与“弯弯的路”中。

偶然~ 发表于 2025-12-24 11:31

“雾色山脉”播放器效果的运用堪称点睛之笔。朦胧的山影与人物剪影形成虚实对比，既保留了歌曲的韵味，又通过现代视觉技术赋予其新的生命力。

偶然~ 发表于 2025-12-24 11:34

创意巧思，雾色山脉的意境延伸，这种传统意境与当代艺术的碰撞，让作品超越了单纯的“MV”范畴，更像是一场沉浸式的情感体验——当旋律与画面同步“呼吸”，观者仿佛置身于那片山水之间，与叶凡的歌曲中的“相思”“守望”产生共情。

偶然~ 发表于 2025-12-24 11:36

小辣椒用音画（播放器）语言诠释了“相遇”的美好：旋律是流动的情感，画面是凝固的诗意，二者在《遇上你是我的缘》中达成奇妙的平衡。

偶然~ 发表于 2025-12-24 11:37

一次让艺术“活”起来的创作，这不仅是一次技术与创意的结合，更是一次让艺术“可听、可看、可感”的成功尝试。

偶然~ 发表于 2025-12-24 11:38

期待未来能看到小辣椒更多这样的作品，让音乐与视觉在碰撞中绽放新的光彩！

偶然~ 发表于 2025-12-24 11:38

晨起记得伸伸背
公园遛弯润润肺
清淡饭菜护好胃
聊天散步别疲惫
多做运动久坐累
心情愉悦笑常随
岁岁安康第一位
争取活过万万岁
页: [1]
查看完整版本: 遇上你是我的缘 （学习黑黑雾色山脉播放器效果）