朵拉 发表于 2025-11-3 21:58

后来的后来（学习马黑黑夜之花效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6908b4763203f7be00cc7681.jpg') no-repeat center/cover; }
    .ball { width: 26px; height: 26px; background: linear-gradient(var(--cc), white); border-radius: 50%; }
    .flower { width: 60px; height: 60px; rotate: var(--deg); animation: flash 2s infinite alternate var(--state); background: url('https://638183.freep.cn/638183/small/f001.png') no-repeat center/cover; }
    @keyframes flash { to { opacity: 0; } }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js?v0';
    const tz = TZ.TZ('pa');
   
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2745888194' });
    tz.lzRan(20, 'pa', { className: 'flower', delay: -4, duration: 8, deg: true, scale: });
    tz.add('div', 'player', 'wrap100 rotate-ani', {style: 'bottom: 60px; display: grid; place-items: center; cursor: pointer'}).playmp3();
    tz.add('div', '', 'flower', {}).to('player');
    tz.lzRing(10, 'player', { className: 'ball', cc: true });
    tz.bgprog().style('bottom: 20px; color: #eee');
    tz.fs().style('bottom: 20px; right: 20px');
</script>

朵拉 发表于 2025-11-3 21:59

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

马黑黑 发表于 2025-11-3 22:26

{:4_199:}

红影 发表于 2025-11-4 23:26

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 后来的后来（学习马黑黑夜之花效果）