朵拉 发表于 2025-2-9 19:16

伤心剖半（学习马黑黑Awake觉醒效果）

<style>
      @import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
      #pa { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/1/cyan.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/5/awake1.jpp') no-repeat center/cover; background-blend-mode: screen; }
      #pa::before { position: absolute; content: ''; left: 900; width: 40%; height: 100%; background: url('https://pic1.imgdb.cn/item/67a78e36d0e0a243d4fd2709.png') no-repeat center/cover; opacity: .5; }
      #pa:hover::before { opacity: 1; }
      
      #pa::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 { position: absolute;left: calc(90% - 630px); top: calc(50% - 10px); width: 100px; height: 100px; background: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover; border-radius: 50%; }
      #fsbtn { top: 20px; }
</style>

<div id="pa" class="pa">
      <audio src="https://music.163.com/song/media/outer/url?id=2645863649"></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/03/17/5baf488c8f695.mp4" autoplay loop muted></video>
      <div id="fsbtn" class="fsbtn"></div>
      <div id="mplayer" class="mplayer"></div>
</div>

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

朵拉 发表于 2025-2-9 19:18

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

小九 发表于 2025-2-9 19:51

特效很漂亮，歌曲也好听，问好朵儿{:4_204:}

红影 发表于 2025-2-9 20:03

漂亮。那个熊猫Logo还是帖子里调整好点，朵宝用个小图遮挡，全屏的时候还是露出来了呢。{:4_173:}

红影 发表于 2025-2-9 20:04

欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-2-9 21:39

{:4_199:}

小辣椒 发表于 2025-2-9 22:09

欣赏朵拉的精彩制作，作业完成快的{:4_199:}

梦江南 发表于 2025-2-10 09:51

问好朵拉，很漂亮的帖子设计。{:4_199:}

樵歌 发表于 2025-2-10 10:47

朵儿出师了哈{:4_199:}

梦油 发表于 2025-2-10 10:51

欣赏佳作，问候朵拉。
页: [1]
查看完整版本: 伤心剖半（学习马黑黑Awake觉醒效果）