|
|

楼主 |
发表于 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>
复制代码
|
|