朵拉 发表于 2025-1-8 11:12

一生的爱（学习马黑黑Pyro效果）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/button.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://pic1.imgdb.cn/item/677d1d13d0e0a243d4f16603.jpg') no-repeat center/cover; }
        #fsbtn { bottom: 20px; }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://file.uhsea.com/2501/fa562fe5980b02439136eac1790b210cGI.mp3" autoplay="" loop=""></audio>
       
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/04/08/18/15/16/video6613c3b472742.mp4" autoplay loop muted></video>
       
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/balls2.svg" alt="" widt="200" height="200" style="top: 130px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" widt="120" height="120" style="left: 100px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" widt="120" height="120" style="right: 100px;" />
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
</script>

朵拉 发表于 2025-1-8 11:12

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

梦江南 发表于 2025-1-8 13:49

问好朵拉，图图漂亮，歌曲好听，欣赏点赞。{:4_204:}

红影 发表于 2025-1-8 19:27

这个朵宝替换了小播和视频，制作很漂亮。
欣赏朵宝好帖{:4_199:}

马黑黑 发表于 2025-1-8 19:31

{:4_199:}

红影 发表于 2025-1-8 19:34

奇怪，当中那个小播按钮不能暂停呢，黑黑的介绍里说svg动图也能暂停的{:4_173:}

小辣椒 发表于 2025-1-8 20:57

朵拉三个svg按钮都换了，中间这个好像是不能停止

小辣椒 发表于 2025-1-8 20:57

整体效果很美的{:4_199:}

走过岁月 发表于 2025-1-8 22:27

欣赏朵拉的作品

杨帆 发表于 2025-1-9 23:39

漂亮！谢谢朵拉友友精彩分享{:4_204:}

辫子哥哥 发表于 2025-1-11 22:20

一生的爱有多伟大
页: [1]
查看完整版本: 一生的爱（学习马黑黑Pyro效果）