重低音纯电音之重金属深水炸弹

马黑黑 · 发表于 2025-11-26 18:12

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-11-26 18:12

帖子代码

<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>

复制代码

马黑黑 · 发表于 2025-11-26 18:24

小播组合：HTML + SVG

小播用 HTML标签做成，圆环进度条用 SVG 做成，二者实际上彼此独立、后者叠加于前者之上。

小播和进度条的容器层元素都是div，拥有相同的 class，都是 .wrap100。小播使用 tz.lzRot() 指令绘制四个有伪元素的 class="ball" 的子元素（ball 实际上是伪元素的形状，虽然最终定稿时设置为椭圆形），构建成绕圈图案，主元素利用渐变背景令中间留空；进度条SVG的容器剪裁为小播内留空大小，在其上加入SVG，绘制两个圆做进度指示控制器。

小播和进度器均使用div做容器且div使用相同的class，是为了便于叠加和定位。