Beyond the sky

马黑黑 发表于 2024-11-15 11:54

马黑黑 发表于 2024-11-15 11:55

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
#pa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 802px; background: url('https://638183.freep.cn/638183/t24/4/sky1.jpg') no-repeat center/cover; filter: url(#f1); box-shadow: 4px 4px 8px #333; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute;display: none; }
.vid { position: absolute; object-fit: cover; mix-blend-mode: normal; }
.vid:nth-of-type(1) { width: 100%; height: 100%; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
.vid:nth-of-type(2) { left: 18%; bottom: 0; width: 200px; height: 200px; border-radius: 50%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=407007278" autoplay loop disablePictureInPicture></audio>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"></svg>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/18/10/16/video65042d88783fd.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/48/5b441035c5496.mp4" autoplay loop muted disablePictureInPicture></video>
</div>

<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var vids = pa.querySelectorAll('.vid');
var dr = Dr.dr('msvg');

dr.draw('filter', {id: 'f1'});

dr.draw('feImage', {
href: 'https://638183.freep.cn/638183/t24/4/sky2.jpg',
x: '20%',
y: 0,
width: 602,
height: 720,
result: 'img1',
}).addTo('f1');

dr.draw('feBlend', {
in: 'img1',
in2: 'SourceGraphic',
mode: 'screen',
}).addTo('f1');

vids.onclick = () => {
aud.paused ? aud.play() : aud.pause();
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-11-15 11:59

本帖配套 svgdr教程·draw + addTo - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做应用演示：

使用 draw() 指令首先创建 id="f1“ 的 filter 滤镜父元素标签，接着创建两个具体的fe滤镜：feImage 使用图片作为滤镜内容，feBlend 将前者的输出效果融合到目标图像，这些滤镜都加入到 filter 标签中作为它的子元素。svg所创建的滤镜，被 id="pa" 的CSS filter属性所应用，作用于 id="pa" 的 div 元素。

马黑黑 发表于 2024-11-15 12:12

feBlend 滤镜和 CSS 的 *-blend-mode 使用相同的原理，都是将某个融合效果应用到指定图层。本帖，帖子容器可视为将被滤镜修饰的图层（下称pa图层），而 f1 滤镜是一个滤镜组合，它首先使用一张图片作为滤镜源（feImage 实现），再通过 feBlend 将滤镜源融合到应用对象即目标图像（SourceGraphic）即pa图层。feBlend 的属性 in= 'img1' 指作用于滤镜源即feImage图像滤镜，in2="SourceGraphic" 指目标图像即pa图层，就是说， feBlend 滤镜以 screen 融合模式（mode）作用于 img1滤镜和pa图层，使之相互融合。

不知道这么解释说的清楚木有？

马黑黑 发表于 2024-11-15 12:17

fe* 滤镜中，result 属性是一种中间结果，result="xxx" 中的 xxx 值将被后续的滤镜识别为一种结果，并对这个结果进行处理，如本帖的 feBlend 滤镜中的属性 in="img1"，img1 就是 feImage 的 result 值，说的是一种中间的结果，即，一张图片，这张图片被 feBlend 使用融合手段作用于目标对象（in2="SourceGraphic"）

红影发表于 2024-11-15 15:16

首先画面很让人震撼，所谓的一将功成万骨枯，女将功成也是如此呢。
非常奇特视觉效果{:4_199:}

泡沫发表于 2024-11-15 15:17

马黑黑发表于 2024-11-15 12:12
feBlend 滤镜和 CSS 的 *-blend-mode 使用相同的原理，都是将某个融合效果应用到指定图层。本帖，帖子容器 ...

正愁不知道这个in2是指哪里这下子可算清楚了，原来是PA背景层，
难怪怪巨人和天空图形的融合如此完美，{:4_173:}
dr.draw('feBlend', {
in: 'img1',
in2: 'SourceGraphic',
mode: 'screen',
}).addTo('f1');

这段算是清楚了。。。{:4_173:}

红影发表于 2024-11-15 15:25

父元素使用到filter: url(#f1)，去寻找f1的源头，先看到dr.draw('filter', {id: 'f1'});滤镜的设置，然后是加了两样东西，首先是图片被addTo('f1')，然后下一步的融合厉害了，把图片融合了，还把后面所有都融合到父元素里去了，这是addTo的极致应用呢{:4_199:}

泡沫发表于 2024-11-15 15:27

马黑黑发表于 2024-11-15 12:17
fe* 滤镜中，result 属性是一种中间结果，result="xxx" 中的 xxx 值将被后续的滤镜识别为一种结果，并对这 ...

老师真是有千里眼，result 属性也是一个困惑的点~~还是这里的说明更详细{:4_170:}

这种规则和写法感觉有点复杂，
先指定一张图片mig1添加到f1,
在f1里面滤跟iin2化学反应之后，
再通过CSS用filter: url(#f1);应用于pa~~

红影发表于 2024-11-15 15:28

这个还是有点麻烦呢，要先把小图addTo('f1')，才能继续融合。主要是为了掩饰addTo吧，否则可以直接对图片screen融合来去掉黑色呢{:4_173:}

红影发表于 2024-11-15 15:28

每个讲解都有具体实例，黑黑辛苦了{:4_199:}

泡沫发表于 2024-11-15 15:31

这个实例生动鲜活，
白老师最近的贴子偏向天空，宇宙，大气磅礴。
音乐还没听到，估计也是震撼。。{:4_173:}

泡沫发表于 2024-11-15 15:44

两个视频的使用相当独特
直接把一个视频裁成圆形，给个鼠标点击，给个控制。。当小播了。。{:4_173:}
全屏彩色下落粒子视频很是壮观，在这个诡异又神秘的广角云背景衬托之下，更好看。。

泡沫发表于 2024-11-15 15:47

樵歌发表于 2024-11-15 19:06

是大魔头还大神仙。吓人滴{:4_189:}

马黑黑 发表于 2024-11-15 19:24

樵歌发表于 2024-11-15 19:06
是大魔头还大神仙。吓人滴

这就是现实世界

马黑黑 发表于 2024-11-15 19:25

红影发表于 2024-11-15 15:16
首先画面很让人震撼，所谓的一将功成万骨枯，女将功成也是如此呢。
非常奇特视觉效果

{:4_190:}

马黑黑 发表于 2024-11-15 19:26

泡沫发表于 2024-11-15 15:17
正愁不知道这个in2是指哪里这下子可算清楚了，原来是PA背景层，
难怪怪巨人和天空图形的融合如此完美，{ ...

{:4_191:}

马黑黑 发表于 2024-11-15 19:26

泡沫发表于 2024-11-15 15:44
两个视频的使用相当独特
直接把一个视频裁成圆形，给个鼠标点击，给个控制。。当小播了。。
全 ...

{:4_190:}

马黑黑 发表于 2024-11-15 19:27

红影发表于 2024-11-15 15:25
父元素使用到filter: url(#f1)，去寻找f1的源头，先看到dr.draw('filter', {id: 'f1'});滤镜的设置，然后是 ...

之前提到过 addTo 很厉害

页: [1] 2 3

花潮论坛's Archiver

Beyond the sky