三角洲行动

马黑黑 发表于 2025-8-20 12:33

马黑黑 发表于 2025-8-20 12:34

<div class="codebox" data-prev="1">
<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>
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-20 12:43

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

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

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

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

梦江南 发表于 2025-8-20 15:40

这个女的有音乐助力好威风！{:4_187:}

梦江南 发表于 2025-8-20 15:41

欣赏黑黑老师精彩制作。

红影发表于 2025-8-20 15:52

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

红影发表于 2025-8-20 15:53

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

花飞飞 发表于 2025-8-20 16:09

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

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

花飞飞 发表于 2025-8-20 16:13

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

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

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

花飞飞 发表于 2025-8-20 16:14

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

马黑黑 发表于 2025-8-20 18:06

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

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

马黑黑 发表于 2025-8-20 18:07

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

对，是这么一回事

马黑黑 发表于 2025-8-20 18:07

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

解读准确

马黑黑 发表于 2025-8-20 18:08

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

是的

马黑黑 发表于 2025-8-20 18:08

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

感谢支持

马黑黑 发表于 2025-8-20 18:09

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

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

马黑黑 发表于 2025-8-20 18:12

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

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

杨帆发表于 2025-8-20 19:03

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

马黑黑 发表于 2025-8-20 19:12

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

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

杨帆发表于 2025-8-20 20:39

本帖最后由杨帆于 2025-8-20 21:10 编辑

马黑黑发表于 2025-8-20 19:12
这是利用 background-blend-mode 融合属性实现的，你也可以实打实地利用重设背景来做
是一种新思路，如何实现重设背景呢{:4_190:}

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

三角洲行动