重低音纯电音之重金属深水炸弹
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/fj.jpg') no-repeat center/cover; }
.ball { width: 4px; height: 90px; background: linear-gradient(to bottom, tan 20%, transparent 20%, transparent 80%, tan 80%, tan 0); display: grid; place-items: center; }
.ball::before, .ball::after { position: absolute; content: ''; top: -40px; width: 20px; height: 40px; background: linear-gradient(tan, white); border-radius: 50%; }
.ball::after { top: 100%; background: linear-gradient(white, tan); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1913362247' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a73f7a71f.mp4' });
tz.add('div', 'wrapper', 'wrap100 rot-ani', { style: 'cursor: pointer; right: 5%; top: 10%' }).playmp3();
tz.lzRot(4, 'wrapper', { className: 'ball', angle: 180 });
tz.add('div', 'svgwrap', 'wrap100', { style: 'right: 5%; top: 10%; clip-path: circle(25%)' });
tz.add('svg', 'msvg', '', { width: 50, height: 50 }).to('svgwrap');
tz.svgson('msvg', 'circle', { id: 'track', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'tan', 'stroke-width': 8 });
tz.svgson('msvg', 'circle', { id: 'prog', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'white', 'stroke-width': 8 });
tz.svgprog('msvg', track, prog);
tz.fs().style('left: 20px; top: 20px');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/fj.jpg') no-repeat center/cover; }
.ball { width: 4px; height: 90px; background: linear-gradient(to bottom, tan 20%, transparent 20%, transparent 80%, tan 80%, tan 0); display: grid; place-items: center; }
.ball::before, .ball::after { position: absolute; content: ''; top: -40px; width: 20px; height: 40px; background: linear-gradient(tan, white); border-radius: 50%; }
.ball::after { top: 100%; background: linear-gradient(white, tan); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1913362247' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a73f7a71f.mp4' });
tz.add('div', 'wrapper', 'wrap100 rot-ani', { style: 'cursor: pointer; right: 5%; top: 10%' }).playmp3();
tz.lzRot(4, 'wrapper', { className: 'ball', angle: 180 });
tz.add('div', 'svgwrap', 'wrap100', { style: 'right: 5%; top: 10%; clip-path: circle(25%)' });
tz.add('svg', 'msvg', '', { width: 50, height: 50 }).to('svgwrap');
tz.svgson('msvg', 'circle', { id: 'track', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'tan', 'stroke-width': 8 });
tz.svgson('msvg', 'circle', { id: 'prog', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'white', 'stroke-width': 8 });
tz.svgprog('msvg', track, prog);
tz.fs().style('left: 20px; top: 20px');
</script>
小播组合：HTML + SVG
小播用 HTML标签 做成，圆环进度条用 SVG 做成，二者实际上彼此独立、后者叠加于前者之上。
小播和进度条的容器层元素都是div，拥有相同的 class，都是 .wrap100。小播使用 tz.lzRot() 指令绘制四个有伪元素的 class="ball" 的子元素（ball 实际上是伪元素的形状，虽然最终定稿时设置为椭圆形），构建成绕圈图案，主元素利用渐变背景令中间留空；进度条SVG的容器剪裁为小播内留空大小，在其上加入SVG，绘制两个圆做进度指示控制器。
小播和进度器均使用div做容器且div使用相同的class，是为了便于叠加和定位。 别致的音乐，新颖的小播，绝妙的效果，谢谢马老师精彩分享{:4_191:} 这音乐特带劲，想是被炸裂出来的，动感十足{:4_199:} 小九 发表于 2025-11-26 19:14
这音乐特带劲，想是被炸裂出来的，动感十足
音响好的话效果非常震撼 杨帆 发表于 2025-11-26 19:04
别致的音乐，新颖的小播，绝妙的效果，谢谢马老师精彩分享
{:4_190:} 我的第一个动作是降低为音响的音量，哈哈~~这个低音重金属真解压！
谢谢马老师分享，晚上好！{:4_190:}{:4_204:}
我赶紧把电脑扬声器关小点，怕小心脏受不了了{:4_193:} 樵歌 发表于 2025-11-26 19:47
我赶紧把电脑扬声器关小点，怕小心脏受不了了
{:4_172:} 霜染枫丹 发表于 2025-11-26 19:36
我的第一个动作是降低为音响的音量，哈哈~~这个低音重金属真解压！
谢谢马老师分享，晚上好！{ ...
{:4_180:} 来欣赏马老师精品佳作！
劲爆!!嗨起来
制作大气
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待马老师佳作频出！
愿你事事如意吉祥，幸福快乐绵长。
感谢马老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 偶然~ 发表于 2025-11-26 21:23
来欣赏马老师精品佳作！
{:4_191:} 马黑黑 发表于 2025-11-26 21:53
愿你心想事成
快乐心喜盈盈
事事如意吉祥
一切顺遂安好
页:
[1]
2