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/5/awake2.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/5/awake1.jpg') no-repeat center/cover; background-blend-mode: screen; }
#pa::before { position: absolute; content: ''; left: 0; width: 30%; height: 100%; background: url('https://638183.freep.cn/638183/t24/5/awake3.png') no-repeat center/cover; opacity: .5; }
#pa:hover::before { opacity: 1; }
#mplayer { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/cat1.jpg') 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=33419765"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.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>
帖子代码：
<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/5/awake2.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/5/awake1.jpg') no-repeat center/cover; background-blend-mode: screen; }
#pa::before { position: absolute; content: ''; left: 0; width: 30%; height: 100%; background: url('https://638183.freep.cn/638183/t24/5/awake3.png') no-repeat center/cover; opacity: .5; }
#pa:hover::before { opacity: 1; }
#mplayer { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/cat1.jpg') 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=33419765"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.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>
进来先看到猫躲在被子里在那里转。。
刚睡醒就被拉来营业啦。。
这猫圆脸，没小尖脸那个好看。{:4_173:} 触碰人物由透明变更清晰，触碰小猫也有亮度变化。。
越是纯乐，越要去画面上扫一扫看看能触发哪些机关。{:4_173:} 非实物背景~~
两张虚幻的光晕图叠在一起滤镜做出效果，加上动态视频的空间感，成就完美的梦幻背景。。
感觉任何边角料的图在你手里都能发挥出最佳作用。。厉害。。
一口气用了四张图，自从封装CSS之后，就很少见这么大量的用图。。
看JS代码，可以自主添加歌词的吧，灵活。。{:4_173:} 谢谢精彩分享，祝马老师新春快乐{:4_176:} 走进了科幻世界。 花飞飞 发表于 2025-2-7 12:59
进来先看到猫躲在被子里在那里转。。
刚睡醒就被拉来营业啦。。
这猫圆脸，没小尖脸那个好看。
这是国字脸好不好？春节吃得好发腮了 花飞飞 发表于 2025-2-7 13:01
触碰人物由透明变更清晰，触碰小猫也有亮度变化。。
越是纯乐，越要去画面上扫一扫看看能触发哪些机关。{: ...
没啥机关，安全的 花飞飞 发表于 2025-2-7 13:04
非实物背景~~
两张虚幻的光晕图叠在一起滤镜做出效果，加上动态视频的空间感，成就完美的梦幻背景。。
感 ...
边角料才值钱 花飞飞 发表于 2025-2-7 13:06
一口气用了四张图，自从封装CSS之后，就很少见这么大量的用图。。
看JS代码，可以自主添加歌词的吧，灵活 ...
这个模块已经用了好几次了，单看文件名就知道支持LRC歌词同步 杨帆 发表于 2025-2-7 14:27
谢谢精彩分享，祝马老师新春快乐
{:4_191:} 樵歌 发表于 2025-2-7 16:41
走进了科幻世界。
里面有科技鱼可钓{:4_170:} 马黑黑 发表于 2025-2-7 17:45
这是国字脸好不好？春节吃得好发腮了
每逢佳节胖三斤，这个也正常正常{:4_173:} 马黑黑 发表于 2025-2-7 17:46
没啥机关，安全的
触碰就有反应的都叫机关，不专指暗器。。{:4_173:} 花飞飞 发表于 2025-2-7 19:47
每逢佳节胖三斤，这个也正常正常
再正常不过了，就像老特说话一样今天说是明天说否 马黑黑 发表于 2025-2-7 17:46
边角料才值钱
看到了，美得不可方物 花飞飞 发表于 2025-2-7 19:49
看到了，美得不可方物
嗯嗯，不方{:4_170:} 花飞飞 发表于 2025-2-7 19:48
触碰就有反应的都叫机关，不专指暗器。。
武侠小说看多了{:4_170:}