Disillusion（幻灭）

马黑黑 发表于 2025-8-17 07:50

马黑黑 发表于 2025-8-17 07:50

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa {
--offsetX: 81px;
--bg: #eee url('https://638183.freep.cn/638183/t24/w5/hrmp.webp') no-repeat center/cover;
--per: 3%;
mask: linear-gradient(45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0) 0 0 / var(--per) 50%;
-webkit-mask: linear-gradient(45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0) 0 0/var(--per) 50%;
}
#ma {
width: 100%;
height: 100%;
background: inherit;
mask: url('https://638183.freep.cn/638183/web/svg/balls2.svg') no-repeat center / 50% 50%, url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center / 50% 50%;
-webkit-mask: url('https://638183.freep.cn/638183/web/svg/balls2.svg') no-repeat center / 50% 50%, url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center / 50% 50%;
clip-path: circle(25%);
}
#btnFs { bottom: 20px; color: #eee; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2041283273" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/01/07/14/35/49/video677ccb4546a69.mp4" autoplay loop muted></video>
<div id="ma" class="invert"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);

var per = 3, step = 0.05, raf;

aud.onplaying = aud.onpaused = () => aud.paused ? cancelAnimationFrame(raf) : animate();
aud.onseek = () => cancelAnimationFrame(raf);

animate();

function animate() {
if (document.visibilityState === 'hidden') return;
cancelAnimationFrame(raf);
per += step;
if (per> 100 || per < 3) step = -step;
pa.style.setProperty('--per', `${per}%`);
if (!aud.paused) raf = requestAnimationFrame(animate);
}
</script>
</div>

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

马黑黑 发表于 2025-8-17 08:06

简单说明：

一、小播构图

   “就地取材”，ma 继承背景图片、尺寸保持和主元素的一致，然后使用双遮罩切图；小播不宜太大，所以用裁剪属性 clip-path 做圆形裁剪。

   多重遮罩技术后续回复补充。

二、主背景遮罩阴影

   斜着身子左右游移的半透明乳白色阴影使用对主背景的遮罩而产生。线性渐变实现：没有全遮罩——透明颜色非全透明，所以得出炫酷的阴影效果。此效果在全屏模式下会打折扣，乳白色效果消失、变成浅灰黑的阴影（原因：全屏模式下浏览器可能使用了特定的渲染方式，找不到相关资料）。

马黑黑 发表于 2025-8-17 08:13

关于多重遮罩：

多重遮罩和多重背景一样，需要做合成处理。缺省默认的合成方式是叠加，本帖使用的合成方式。

以下是官方对 mask-composite 遮罩合成的解释摘要：

在（mask-composite）合成操作中，称当前遮罩层为源，其下方所有层为目标。

add : 将源叠加在目标上方。
subtract : 仅保留源图层中位于目标区域之外的部分。
intersect : 仅保留源与目标重叠的区域，并替换目标中的相应区域。
exclude : 将源和目标中不重叠的区域合并显示。

本帖，实际上是这样使用遮罩的合成方式：

mask-composite: add;
--webkit-mask-composite: add;

因为是默认值，所以可以缺省。

花飞飞 发表于 2025-8-17 08:55

这个作品是遮罩的综合使用方法：
大背景用了动态遮罩，形状是会移动的。。
-webkit-mask: linear-gradient(45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0) 0 0/var(--per) 50%; }
这句的最后两个数据表示宽高，宽是动态的，高是50%。所以横着跑。。
如果要竖着跑是不是要换成50% var(--per);。
如果两个都换成动态的，是不是就乱跑了。。{:4_170:}

花飞飞 发表于 2025-8-17 09:05

这个数据很有意思：--per: 3%;有的贴子里是0%，有的是-0.5，这个是3，
当它是0的时候知道变化是从0%-100%。。。
这个是3在这里能控制遮罩的什么变化呀，改大改小好象看不出变化。。。

主要是线性渐变遮罩设计的太复杂。。
45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0这一串直接看晕了。。
渐变45角呈现。。。先显红45，再黑10的只有0.9透明度，最后再红45
艾玛，这个贴子技术含量太高，光这一句就够看半天的了。。

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

马黑黑发表于 2025-8-17 08:13
关于多重遮罩：

多重遮罩和多重背景一样，需要做合成处理。缺省默认的合成方式是叠加，本帖使用的合成方 ...

小播昨天是看出来用了两层遮罩，一层六边形的，一层是粒子扩散的，背景源也用了大背景的红衣女生。当时感觉还挺神奇的。。

还以为跟视频一样，直接叠起来就行了，忘记了要合成处理，
现在想想，双重视频叠的时候也是有融合处理的。这里用叠加，反正是重叠在一起了。。

两个遮罩都是一半大小，还进行了圆形裁切clip-path: circle(25%);，不过图本来就是圆的，还透明，不剪也可以的吧。。

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

这贴豪华，不仅是画面，还用了豪华的组合遮罩~~音乐好听，赞。。
小播转到某个角度，感觉不太圆了，成了长方形，粒子有缺失，不知道别人有没有这种感觉。。

马黑黑 发表于 2025-8-17 09:46

花飞飞发表于 2025-8-17 08:55
这个作品是遮罩的综合使用方法：
大背景用了动态遮罩，形状是会移动的。。
-webkit-mask: linear-gradien ...

理解正确，可以大胆尝试。

马黑黑 发表于 2025-8-17 09:47

花飞飞发表于 2025-8-17 09:20
这贴豪华，不仅是画面，还用了豪华的组合遮罩~~音乐好听，赞。。
小播转到某个角度，感觉不太圆了，成了长 ...

对。转到特定角度，小播背景会与主背景重合，有部分粒子消失，形成特殊的结构

马黑黑 发表于 2025-8-17 09:53

花飞飞发表于 2025-8-17 09:16
小播昨天是看出来用了两层遮罩，一层六边形的，一层是粒子扩散的，背景源也用了大背景的红衣女生。当时感 ...

不裁剪的话没问题，但是 ma 就占据整个帖子的尺寸，小播的点击范围太宽。

视频叠加是自然叠加，它们是元素叠加，属于实体叠加。如果不对视频做遮罩处理，叠加后有一个会被覆盖、看不到。

mask 遮罩的合成不论用叠加还是其它合成方式，它们都是属性叠加，非实体叠加，所以理论上要做合成处理，方式是 mask-composite 合成，有缺省值，如果使用缺省值则不做任何处理（但实际上已经做了处理）。

背景叠加也是属性叠加，也需要做合成处理，方式是背景融合 background-blend-mode

马黑黑 发表于 2025-8-17 10:01

花飞飞发表于 2025-8-17 09:05
这个数据很有意思：--per: 3%;有的贴子里是0%，有的是-0.5，这个是3，
当它是0的时候知道变化是从0%-100% ...

--per 变量仅作用于 #pa 的背景尺寸宽度，这可以从 background: linear-gradient(...) 0 0 / var(--per) 50% 看得出来。

意思就是， --per 这个变量是用来动态改变背景宽度的，它从 3% 开始，遮罩产生的半透明多边形形状就是这么大，这是它最小的值；然后变为 100%，这是它最大的值。最小值和最大值的形状来回变化。

这里注意：3%也好，100%也好，不是值半透明阴影的结果，而是整体遮罩的结果，但这些值的改变，会改变阴影形状的外观属性。

花飞飞 发表于 2025-8-17 10:40

马黑黑发表于 2025-8-17 09:46
理解正确，可以大胆尝试。

试了，没有想象中的乱，还是挺整齐的。。
应该是取得值一样，所以就横竖同时整齐走

花飞飞 发表于 2025-8-17 10:44

马黑黑发表于 2025-8-17 09:47
对。转到特定角度，小播背景会与主背景重合，有部分粒子消失，形成特殊的结构

原来如此，是背景重合了。。这就可以理解了。。好神奇。。

花飞飞 发表于 2025-8-17 10:50

马黑黑发表于 2025-8-17 09:53
不裁剪的话没问题，但是 ma 就占据整个帖子的尺寸，小播的点击范围太宽。

视频叠加是自然叠加，它们是 ...

原来剪小点是为了控制小播范围，这个是直观看不到的。
想到了，昨天你用的两个视频都可以显示，其实并没有进行融合处理，只是因为透明度默认为0.5所以，两个都可以一起出现。。

今天这个遮罩不属于实体，默认叠加，显示方式可以有多种。。{:4_199:}
这点跟PS两个图层混合时可以设置显示重叠部分，或者设置成显示重叠之外部分原理一样。。
涉及的知识点很丰富。。

花飞飞 发表于 2025-8-17 10:57

马黑黑发表于 2025-8-17 10:01
--per 变量仅作用于 #pa 的背景尺寸宽度，这可以从 background: linear-gradient(...) 0 0 / var(--per)...

--per 变量很重要啊，如果是3的话，就很密集，每条看着都小小窄窄的。。。
慢慢变大后，形状就根着越来越宽大

来回变，原来没有留意，现在盯着它看一会儿，就感觉到像是孙悟空的金箍棒一样，
从小小的变到100，每条都覆盖整个页面，最后再慢慢变回去。。

这个好又看到新的了。。{:4_173:}

红影发表于 2025-8-17 10:58

主背景上来回移动的半透明效果还以为是视频呢，看了代码才知道，原来是用遮罩营造出来的效果，是用代码实现的，这个真漂亮，也真没想到{:4_173:}

红影发表于 2025-8-17 11:01

这小播是剪切原背景的，会出现部分背景颜色重合，用鼠标触碰后的invert变化，倒是让小播更清晰呢{:4_187:}

马黑黑 发表于 2025-8-17 12:07

红影发表于 2025-8-17 11:01
这小播是剪切原背景的，会出现部分背景颜色重合，用鼠标触碰后的invert变化，倒是让小播更清晰呢

{:4_181:}

马黑黑 发表于 2025-8-17 12:08

红影发表于 2025-8-17 10:58
主背景上来回移动的半透明效果还以为是视频呢，看了代码才知道，原来是用遮罩营造出来的效果，是用代码实现 ...

背景、遮罩、剪裁等属性都可以做成动画，取其属性值列表中的任意一个或多个组合

页: [1] 2 3 4 5 6

花潮论坛's Archiver

Disillusion（幻灭）