雾色山脉
<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}px; top: ${p}px; color: ${tz.colorHSL()}`})
.text(txtAr)
.to(player)
.playmp3();
});
tz.bgprog().style('width: 120px; bottom: 25px; color: cyan');
tz.fs().style('top: 30px');
</script> <div class="codebox">
<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}px; top: ${p}px; color: ${tz.colorHSL()}`})
.text(txtAr)
.to(player)
.playmp3();
});
tz.bgprog().style('width: 120px; bottom: 25px; color: cyan');
tz.fs().style('top: 30px');
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
</script> 视频来自熊猫国。视频做了形状切割，代码忘记了注释，在第 6 行 本帖最后由 霜染枫丹 于 2025-12-21 21:48 编辑
马老师晚上好！情绪饱满的佳作，四个字每个都是按钮，我第一次看到竟然可以这样。{:4_199:}{:4_178:}{:4_204:}
本帖最后由 霜染枫丹 于 2025-12-21 21:48 编辑
我看了老半天，因为我在想，这个背景若单选我可能不会选用，因为比较暗，组合到一起没看到画面，我肯定不会选，认为这么暗的色彩效果可能会压抑。可当我看到这个画面，无奈的只有笑了。纯净的喷涌情绪饱满热烈但不张扬，胜似DJ的歌声在喷涌烈焰的节奏下粒子似火似花，歌声高亢悠长渲染着力量感，特别佩服！！代码可用，我也肯定会用，意境达不到{:4_204:}{:4_190:}
这个视频切割有意思，开始还以为视频高度跟着切割的最低点变得上下压缩了，其实视频本身就是高度方向窄的，不是切割弄的{:4_173:} 红影 发表于 2025-12-21 22:59
这个视频切割有意思，开始还以为视频高度跟着切割的最低点变得上下压缩了，其实视频本身就是高度方向窄的， ...
对。这是窄幅视频 霜染枫丹 发表于 2025-12-21 21:46
我看了老半天，因为我在想，这个背景若单选我可能不会选用，因为比较暗，组合到一起没看到画面，我肯定不会 ...
一切皆可搭配 霜染枫丹 发表于 2025-12-21 21:37
马老师晚上好！情绪饱满的佳作，四个字每个都是按钮，我第一次看到竟然可以这样。{:4_20 ...
几乎没有什么不可以的吧 这个帖子最大的亮点还是在标题字的设计上，能按字拆分，并能均匀地分布在规定的路径上。
按照封装方式闪烁着变化着颜色，鼠标触碰还能变大和旋转。真漂亮{:4_199:} 红影 发表于 2025-12-21 23:03
这个帖子最大的亮点还是在标题字的设计上，能按字拆分，并能均匀地分布在规定的路径上。
按照封装方式闪烁 ...
{:4_190:} 帖子的整体效果很奇妙，点赞{:4_199:} 红影 发表于 2025-12-21 23:04
帖子的整体效果很奇妙，点赞
{:4_191:} 马黑黑 发表于 2025-12-21 23:02
几乎没有什么不可以的吧
从开始跟马老师学做播放器，深刻体会到那句看花容易绣花难。我每一个制作都想过素材应该怎样生成，怎样能在画面中看到歌曲的味道，可制作起来就没有一次是一次就觉得顺眼，只能几幅图片的比较。哈哈~~钱包空空如野，却喜欢诗和远方，可能就是说的我这样一类的人。{:4_190:}
霜染枫丹 发表于 2025-12-21 23:12
从开始跟马老师学做播放器，深刻体会到那句看花容易绣花难。我每一个制作都想过素材应该怎样生成，怎样能 ...
做帖是创作，总得反复尝试 大姐越做越有创意了，学习领悟得快。小弟羡慕！{:4_190:} 每个标题字都是按钮，画面有种神秘感，佩服！{:4_187:} 马老师，您制作的音画《[清音纯乐] 雾色山脉》真的太棒了！您以灵动笔触勾勒出云雾缭绕的奇幻山水，墨色浓淡间尽显传统美学的空灵意境，又融入现代艺术的创新表达，让每一帧画面都如水墨长卷般舒展，仿佛能听见山风穿过林梢的轻响，看见云雾在山谷间流动的韵律。 音画结合的巧思更令人惊叹：清音纯乐与视觉画面相辅相成，弦乐的温润与自然音效的空灵交织，既保留了传统音乐的雅致，又赋予画面以呼吸般的生命力。 当指尖划过琴弦的瞬间，与屏幕上云雾的飘散形成奇妙的呼应，仿佛整个山脉都在随着旋律轻轻震颤，让人在视听盛宴中感受到自然与艺术的深度共鸣。