朵拉 发表于 2025-3-10 21:02

杏 树 花（学习马黑黑美丽世界粒子效果）

本帖最后由 朵拉 于 2025-3-10 21:05 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
        #tz { margin: 30px 0 30px calc(50% - 620px); background: url('https://pic1.imgdb.cn/item/67cd7cfc066befcec6e22950.jpg') no-repeat center/cover; }
       
        #tz::after { position: absolute; content: '歌 曲：杏树花'; background: grey; border-radius: 0 12px 12px 0; left: calc(100% - 150px); top: calc(50% - 300px);
width: 150px; height: 40px; display: grid; place-items: center; }
       
        #mplayer { width: 640px; bottom: 10px; background: none; box-shadow: none; color: snow; }
        #mplayer img { filter: invert(.8); }
        #fsbtn { top: 20px; border-color: snow; color: snow; }
        #lizi { width: 400px; height: 400px; }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://cccimg.com/view.php/895bbf901fdeae9719d4d90685dab225.mp3" autoplay="" loop=""></audio>
       
        <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/07/5b50ba69437d1.mp4" autoplay loop muted></video>
        <div id="lizi"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
        import { lz } from 'https://638183.freep.cn/638183/web/lizi/canvasparticles.js';
        hcplay(tz);
        lz(lizi, { total: 30, color: '#e29272' });
        tz.onclick = () => lizi.click();
</script>

朵拉 发表于 2025-3-10 21:08

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

红影 发表于 2025-3-10 21:21

漂亮，欣赏朵宝好帖{:4_187:}

小文 发表于 2025-3-11 08:57

喜欢美图

梦江南 发表于 2025-3-11 09:36

欣赏美图，问好！

马黑黑 发表于 2025-3-11 12:25

朵拉 发表于 2025-3-10 21:08
@马黑黑
老师 晚上好，学生完成作业，请指正哈

贴图方式可以遮挡logo，这个是简单的。还有一种方法前面说的，用 mask 遮罩
页: [1]
查看完整版本: 杏 树 花（学习马黑黑美丽世界粒子效果）