红影 发表于 2025-10-19 17:01

【月满花潮庆华诞】有风无风皆自由（学习黑黑《在雨中》代码)）


<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
        .pa { --offsetX: 81px; --bg: tan url('https://s3.bmp.ovh/imgs/2025/10/18/f494be711273c548.jpg') no-repeat center/cover; --ma-size: 3vw;border-radius: 26px; }
        /* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
        .rect { width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 25% 30%, 50% 100%, 70% 25%, 100% 25%, 50% 0); transform-origin: center bottom; background: lightblue; }
        .prog { --color: lightblue; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
        const tz = TZ.TZ('pa');

        // 歌词（花朝格式）
       
        let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

        // 大熊视频
        tz.add('video', '', 'pd-vid', {
                src: 'https://img.tukuppt.com/video_show/2269348/00/14/92/5e67ac4a808a8_10s_big.mp4'
        });

        // 加上音频
        tz.add('audio', '', '', {
                src: 'https://music.163.com/song/media/outer/url?id=2738479164'
        });

        /** 以下创建LRC歌词同步标签
          除left、top定位必须设置，其余可以缺省使用默认配置
          style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
          指令里面的内容需要分行写时使用反引号，写在一行可用单引号
        **/
        tz.lrc(geci).style(`
               
                top: 40px; /* 定位 : 必须 */
                color: #b0effc; /* 前景色 : 可选（默认wheat）*/
                font: bold 3.4em STLiti;
                --c1: #a98af9; /* 渐变颜色1 : 可选（默认橙色）*/
                --c2: cyan; /* 渐变颜色2 : 可选（默认黄色）*/
                --deg: to bottom;/* 渐变角度或方向 : 可选（默认180deg）*/
                --border: 1px 0 1px 0;/* 同步线条 : 可选（默认0 0 1px 0）*/
        `);

        // 创建进度条 : 设置位置和进度颜色
        tz.bgprog().style('left: calc(78% - 70px); bottom: 20px; --prog: lightblue;');

        // 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
        tz.add('div', 'player', 'wrap100 rot-ani cursor', {
                title: 'Alt+X', style: 'left: 78%; bottom: 40px; place-items: start center;'
        }).playmp3();

        // 小播内部零件装进 id="player" 标签
        tz.lzRot(7, 'player', {className: 'rect'});

        // 全屏 : 并设置定位和颜色
        tz.fs().style('bottom: 20px; left: 20px; color: lightblue;');
</script>

红影 发表于 2025-10-19 17:02

自在游览，在路上的快乐。心若无所求 有风无风皆自由。

答案在路上 自由在风里{:4_204:}

红影 发表于 2025-10-19 17:03

我把歌词上面的线也留着了，感觉也不错@马黑黑 {:4_173:}

漫云儿 发表于 2025-10-19 17:21

问好紅影姑娘！播放器整的挺漂亮的。赞一个！{:4_199:}

寒冬残荷 发表于 2025-10-19 17:29

精彩！第一个给马老师交作业的“学生”！{:5_106:}

寒冬残荷 发表于 2025-10-19 17:34

我也喜欢这首歌！{:5_117:}

心若无所求 有风无风皆自由
向往着远方 寻找理想的温柔
平凡日子中 不争不夺不忧愁
行走人海中 做个某某某
心若无所求 有风无风皆自由
把晚风做酒 陪我越生活荒丘
等一场大雨 洗礼浑浊的眼眸
雨过天晴后 一路花开一路走

梦江南 发表于 2025-10-19 17:42

图图漂亮，这是在旅游的旅途上吗？{:4_187:}

梦油 发表于 2025-10-19 17:42

画面做得真好，特别是那弯弯曲曲的公路，做的很成功。

梦江南 发表于 2025-10-19 17:43

歌词横到上面去了，小播也换过了，影子大厉害了！{:4_178:}

马黑黑 发表于 2025-10-19 17:48

红影 发表于 2025-10-19 17:03
我把歌词上面的线也留着了，感觉也不错@马黑黑

对，酱紫也挺好

小辣椒 发表于 2025-10-19 17:49

亲爱的，这个修改的漂亮，这个画面也是很相配{:4_199:}

澜天 发表于 2025-10-19 19:57

行走人海中 做个某某某
确实
无欲无求更自由
{:4_178:}

偶然~ 发表于 2025-10-19 20:46

音画网名

偶然~ 发表于 2025-10-19 20:46

制作大气

偶然~ 发表于 2025-10-19 20:47

让人陶醉，音画合一

偶然~ 发表于 2025-10-19 20:47

是精品，一定是花了很多心思去制作的

偶然~ 发表于 2025-10-19 20:48

感谢红影带来的精彩，辛苦了！祝你开心幸福、阖家幸福！

小文 发表于 2025-10-19 21:59

大手笔！恩师了得，极欣赏，唱得很好！{:4_204:}{:4_191:}

红影 发表于 2025-10-19 22:42

漫云儿 发表于 2025-10-19 17:21
问好紅影姑娘！播放器整的挺漂亮的。赞一个！

谢谢云儿，被你夸了，开心{:4_173:}

红影 发表于 2025-10-19 22:43

寒冬残荷 发表于 2025-10-19 17:29
精彩！第一个给马老师交作业的“学生”！

这个作业好多人都先完成了，我这个已经迟了呢{:4_173:}
页: [1] 2 3
查看完整版本: 【月满花潮庆华诞】有风无风皆自由（学习黑黑《在雨中》代码)）