Awake(觉醒)

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
   
3.         #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; }
   
4.         #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; }
   
5.         #pa:hover::before { opacity: 1; }
   
6.         #mplayer { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/cat1.jpg') no-repeat center/cover; border-radius: 50%; }
   
7.         #fsbtn { top: 20px; }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa">
    
11.         <audio src="https://music.163.com/song/media/outer/url?id=33419765"></audio>
    
12.         <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.mp4" autoplay loop muted></video>
    
13.         <div id="fsbtn" class="fsbtn"></div>
    
14.         <div id="mplayer" class="mplayer"></div>
    
15. </div>
    
16. 
    
17. <script type="module">
    
18.         import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
    
19.         import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
    
20.         hcplay(pa);
    
21.         fscreen.fs(pa, fsbtn);
    
22. </script>

复制代码

花飞飞

进来先看到猫躲在被子里在那里转。。
刚睡醒就被拉来营业啦。。
这猫圆脸，没小尖脸那个好看。

花飞飞

触碰人物由透明变更清晰，触碰小猫也有亮度变化。。
越是纯乐，越要去画面上扫一扫看看能触发哪些机关。

花飞飞

非实物背景~~
两张虚幻的光晕图叠在一起滤镜做出效果，加上动态视频的空间感，成就完美的梦幻背景。。
感觉任何边角料的图在你手里都能发挥出最佳作用。。厉害。。

花飞飞

一口气用了四张图，自从封装CSS之后，就很少见这么大量的用图。。
看JS代码，可以自主添加歌词的吧，灵活。。

杨帆

谢谢精彩分享，祝马老师新春快乐

樵歌

走进了科幻世界。

马黑黑

花飞飞 发表于 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
谢谢精彩分享，祝马老师新春快乐

马黑黑

樵歌 发表于 2025-2-7 16:41
走进了科幻世界。

里面有科技鱼可钓

花飞飞

马黑黑 发表于 2025-2-7 17:45
这是国字脸好不好？春节吃得好发腮了

每逢佳节胖三斤，这个也正常正常

花飞飞

马黑黑 发表于 2025-2-7 17:46
没啥机关，安全的

触碰就有反应的都叫机关，不专指暗器。。

马黑黑

花飞飞 发表于 2025-2-7 19:47
每逢佳节胖三斤，这个也正常正常

再正常不过了，就像老特说话一样今天说是明天说否

花飞飞

马黑黑 发表于 2025-2-7 17:46
边角料才值钱

看到了，美得不可方物

马黑黑

花飞飞 发表于 2025-2-7 19:49
看到了，美得不可方物

嗯嗯，不方

马黑黑

花飞飞 发表于 2025-2-7 19:48
触碰就有反应的都叫机关，不专指暗器。。

武侠小说看多了