雾色山脉

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css'; .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/mistland.webp') no-repeat center/cover; } .title-text { font-size: 40px; cursor: pointer; transition: .5s; animation: flash .5s infinite alternate var(--state); } .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'); tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1924245977'}); tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/02/10/5b51555fb44a9.mp4'}); tz.add('div', 'player', 'wrap100', {style: 'bottom: 20px'}); const txtAr = '雾色山脉'.split(''); // 帖子标题按字拆分为数组 // 按标题字数获取外切园上半部各字所在标签的位置 const pos = tz.ringPos(txtAr.length, {cx: 50, cy: 50, r1: 160, r2: 80, a: 180, startA: -180, offsetX: 20}); // 输出半圆弧状标题 pos.forEach((p, k) => { tz.add('span', '', 'title-text', {style: `left: ${p[0]}px; top: ${p[1]}px; color: ${tz.colorHSL()}`}) .text(txtAr[k]) .to(player) .playmp3(); }); tz.bgprog().style('width: 120px; bottom: 25px; color: cyan'); tz.fs().style('top: 30px'); </script>

马黑黑

视频来自熊猫国。视频做了形状切割，代码忘记了注释，在第 6 行

霜染枫丹

马老师晚上好！情绪饱满的佳作，四个字每个都是按钮，我第一次看到竟然可以这样。

霜染枫丹

我看了老半天，因为我在想，这个背景若单选我可能不会选用，因为比较暗，组合到一起没看到画面，我肯定不会选，认为这么暗的色彩效果可能会压抑。可当我看到这个画面，无奈的只有笑了。纯净的喷涌情绪饱满热烈但不张扬，胜似DJ的歌声在喷涌烈焰的节奏下粒子似火似花，歌声高亢悠长渲染着力量感，特别佩服！！代码可用，我也肯定会用，意境达不到

红影

这个视频切割有意思，开始还以为视频高度跟着切割的最低点变得上下压缩了，其实视频本身就是高度方向窄的，不是切割弄的

马黑黑

红影 发表于 2025-12-21 22:59
这个视频切割有意思，开始还以为视频高度跟着切割的最低点变得上下压缩了，其实视频本身就是高度方向窄的， ...

对。这是窄幅视频

马黑黑

霜染枫丹 发表于 2025-12-21 21:46
我看了老半天，因为我在想，这个背景若单选我可能不会选用，因为比较暗，组合到一起没看到画面，我肯定不会 ...

一切皆可搭配

马黑黑

霜染枫丹 发表于 2025-12-21 21:37
马老师晚上好！情绪饱满的佳作，四个字每个都是按钮，我第一次看到竟然可以这样。{:4_20 ...

几乎没有什么不可以的吧

红影

这个帖子最大的亮点还是在标题字的设计上，能按字拆分，并能均匀地分布在规定的路径上。
按照封装方式闪烁着变化着颜色，鼠标触碰还能变大和旋转。真漂亮

马黑黑

红影 发表于 2025-12-21 23:03
这个帖子最大的亮点还是在标题字的设计上，能按字拆分，并能均匀地分布在规定的路径上。
按照封装方式闪烁 ...

红影

帖子的整体效果很奇妙，点赞

马黑黑

红影 发表于 2025-12-21 23:04
帖子的整体效果很奇妙，点赞

霜染枫丹

马黑黑 发表于 2025-12-21 23:02
几乎没有什么不可以的吧

从开始跟马老师学做播放器，深刻体会到那句看花容易绣花难。我每一个制作都想过素材应该怎样生成，怎样能在画面中看到歌曲的味道，可制作起来就没有一次是一次就觉得顺眼，只能几幅图片的比较。哈哈~~钱包空空如野，却喜欢诗和远方，可能就是说的我这样一类的人。

马黑黑

霜染枫丹 发表于 2025-12-21 23:12
从开始跟马老师学做播放器，深刻体会到那句看花容易绣花难。我每一个制作都想过素材应该怎样生成，怎样能 ...

做帖是创作，总得反复尝试

樵歌

大姐越做越有创意了，学习领悟得快。小弟羡慕！

梦江南

每个标题字都是按钮，画面有种神秘感，佩服！

偶然~

马老师，您制作的音画《[清音纯乐] 雾色山脉》真的太棒了！您以灵动笔触勾勒出云雾缭绕的奇幻山水，墨色浓淡间尽显传统美学的空灵意境，又融入现代艺术的创新表达，让每一帧画面都如水墨长卷般舒展，仿佛能听见山风穿过林梢的轻响，看见云雾在山谷间流动的韵律。

偶然~

音画结合的巧思更令人惊叹：清音纯乐与视觉画面相辅相成，弦乐的温润与自然音效的空灵交织，既保留了传统音乐的雅致，又赋予画面以呼吸般的生命力。

偶然~

当指尖划过琴弦的瞬间，与屏幕上云雾的飘散形成奇妙的呼应，仿佛整个山脉都在随着旋律轻轻震颤，让人在视听盛宴中感受到自然与艺术的深度共鸣。