朵拉 发表于 2026-1-8 20:50

纵此生（学习马黑黑深水炸弹效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/695fa1ae3379dd73693963fb.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');
   
    var lrcAr = [
    ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       

      ];
      tz.lrc(lrcAr).style('top: 300px; right: 500px');
   

    tz.add('audio', '', '', { src: 'https://cccimg.com/view.php/17a3c65bcc03ee808931562bfa5c4f77.mp3' });
    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>

朵拉 发表于 2026-1-8 20:51

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

小辣椒 发表于 2026-1-8 21:26

欣赏朵拉的精彩制作{:4_199:}

红影 发表于 2026-1-8 23:15

场景和开阔，制作漂亮。欣赏朵宝好帖{:4_187:}
歌词好像再高点才好，现在正好在人头上，有点压抑呢。

马黑黑 发表于 2026-1-9 13:06

{:4_199:}
页: [1]
查看完整版本: 纵此生（学习马黑黑深水炸弹效果）