朵拉 发表于 2025-6-17 21:15

梦中的那片海（学习马黑黑Hero Memories效果）

<style>
      #tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6851660158cb8da5c855b713.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
      #btnFs { bottom: 20px; color: #eee; }
      #tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
</style>

<div id="tz"></div>
<audio id="aud" src="https://cccimg.com/view.php/b0493409584d5c93c317a6f07e7f598a.mp3" autoplay="" loop=""></audio>

<script type="module">
      import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
      LZ(tz);
</script>

朵拉 发表于 2025-6-17 21:15

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

红影 发表于 2025-6-17 21:43

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

愤怒的葡萄 发表于 2025-6-17 21:58

制作得挺漂亮的。

马黑黑 发表于 2025-6-17 22:11

朵拉 发表于 2025-6-17 21:15
@马黑黑
老师 晚上好，学生交作业，请指正

这个代码量比较大。不过，可以考虑贴图换上和主题相关的图片，这样就更完美

梦江南 发表于 2025-6-18 08:53

欣赏老师佳作，赞！{:4_187:}
页: [1]
查看完整版本: 梦中的那片海（学习马黑黑Hero Memories效果）