三角洲行动

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg:url('https://638183.freep.cn/638183/t24/w5/39kh.webp') no-repeat center/cover, url('https://638183.freep.cn/638183/web/svg/ball8path1.svg') no-repeat center/100% 100%; --ma-size: 20%; --mode: hue; background-blend-mode: var(--mode); } #ma { left: 30px; top: 30px; background: url('https://638183.freep.cn/638183/web/svg/pl-white.svg') no-repeat center/cover, url('https://638183.freep.cn/638183/web/svg/rotc.svg') no-repeat center/ 85% 85%; background-blend-mode: var(--mode); } #btnFs { left: 30px; bottom: 20px; color: #eee; } </style> <div id="pa"> <audio id="audio" src="https://music.163.com/song/media/outer/url?id=2675181761" autoplay loop></audio> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/34/24/video6822f600d53e8.mp4" autoplay loop muted></video> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/07/17/14/23/45/video687896f19ba33.mp4" autoplay loop muted></video> <div id="ma" class="opacity"></div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; FS(pa, ma); audio.onplaying = audio.onpause = () => { pa.style.setProperty('--mode', audio.paused ? 'normal' : 'hue'); }; </script>

马黑黑

本帖没有什么新的东东。主要演示如何隐去多个背景中的融合背景。

以 pa 的背景为例加以说明：

        主背景是图片背景，它放在 background 属性的最前面，处于背景层级中的最顶层，它会遮盖掉其后的其他背景，所以其后的背景使用 background-blend-mode 属性来实现背景融合，大家都在背景上有一席之地。
        pa 的第二个背景是有有动画的SVG图片。音乐暂停时希望它也停下动画是不可能的，因此采用隐藏的方法让它暂时消失是较好的做法。这需要改变 background-blend-mode 属性：音乐暂停时它隐去、音乐播放后它回来。

小播 ma 也是用相同性质的双背景，也通过同名CSS变量控制。

梦江南

这个女的有音乐助力好威风！

梦江南

欣赏黑黑老师精彩制作。

红影

小播和背景都是双图片呢，暂停时动态的都被隐去了。仅仅使用normal就利用排列层次达到目的。这个思路太巧妙了

红影

小播好像天然带点半透明呢，暂停还能隐约看到它背后的动图

花飞飞

背景双层，钢铁女子和粒子旋转，用--mode: hue;色相混合，
小播也是双层，同样调用的mode混合变量。。
这个新作还是融合实例。。

视频也用了双层，同样沿用封装里的透明度50，可以同显示。。
触碰小播透明度发生变化，这是封装的小播互动效果之一。。

花飞飞

马黑黑 发表于 2025-8-20 12:43
本帖没有什么新的东东。主要演示如何隐去多个背景中的融合背景。

以 pa 的背景为例加以说明：

根据音频播放来改变MODE的变量，播放时用色相，暂停时用恢复常态。。。
原来设--mode变量在这里还有这么重要的作用。。

花飞飞

音乐有力量，画面很酷，刚战场上出来似的浑身带着杀气，令人精神振奋

马黑黑

花飞飞 发表于 2025-8-20 16:14
音乐有力量，画面很酷，刚战场上出来似的浑身带着杀气，令人精神振奋

这是游戏背景音乐。这类音乐通常都很好听。

马黑黑

花飞飞 发表于 2025-8-20 16:13
根据音频播放来改变MODE的变量，播放时用色相，暂停时用恢复常态。。。
原来设--mode变量在这里还有这么 ...

对，是这么一回事

马黑黑

花飞飞 发表于 2025-8-20 16:09
背景双层，钢铁女子和粒子旋转，用--mode: hue;色相混合，
小播也是双层，同样调用的mode混合变量。。
这 ...

解读准确

马黑黑

梦江南 发表于 2025-8-20 15:40
这个女的有音乐助力好威风！

是的

马黑黑

梦江南 发表于 2025-8-20 15:41
欣赏黑黑老师精彩制作。

感谢支持

马黑黑

红影 发表于 2025-8-20 15:52
小播和背景都是双图片呢，暂停时动态的都被隐去了。仅仅使用normal就利用排列层次达到目的。这个思路太巧妙 ...

思路是一些功能的实现关键。

马黑黑

红影 发表于 2025-8-20 15:53
小播好像天然带点半透明呢，暂停还能隐约看到它背后的动图

实际上是视频对它的作用产生的这种效果。视频带透明度并且遮罩，在 CSS源 中设置好的。

杨帆

哇，动图背景也可以掩藏了！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-8-20 19:03
哇，动图背景也可以掩藏了！谢谢马老师精彩分享

这是利用 background-blend-mode 融合属性实现的，你也可以实打实地利用重设背景来做

杨帆

马黑黑 发表于 2025-8-20 19:12
这是利用 background-blend-mode 融合属性实现的，你也可以实打实地利用重设背景来做

是一种新思路，如何实现重设背景呢