Beyond the sky

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

帖子代码

<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[1].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>

马黑黑 · 发表于 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"）