朵拉 发表于 2026-2-5 22:28

喜欢到不喜欢为止（学习马黑黑记忆信笺效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/69849fa7013471eb7b52b956.jpg') no-repeat center/cover; }
    #player { position: absolute; width: 40px; height: 60px; cursor: pointer;}
    #player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; border: 4px solid white; border-radius: 8px; animation: rotting var(--du) linear infinite var(--state); --deg: 360deg; --du: 1.5s; }
    #player::after { --deg: -360deg; --du: 0.5s; }
    @keyframes rotting { to { transform: rotate(var(--deg)); } }
</style>

<div class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');
    var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
      ];
    tz.lrc(lrcAr).style('top: 20px; right: 500px');
    tz.add('audio', '', '', { src: 'https://cccimg.com/view.php/518f3163605145f986776d5cf81a22d7.mp3' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/33/5d1e16fbefc2e.mp4' });
    tz.add('div', 'player', '', { style: 'bottom: 60px;' }).playmp3();
    tz.bgprog().style('bottom: 30px; color: #56a4ad; width: 240px;');
    tz.fs().style('left: 20px; top: 20px;')
</script>

朵拉 发表于 2026-2-5 22:29

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

马黑黑 发表于 2026-2-5 23:54

{:4_199:}

红影 发表于 2026-2-6 08:58

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 喜欢到不喜欢为止（学习马黑黑记忆信笺效果）