苍：序曲（蒙版应用演示）

凡哥 · 发表于 2024-7-22 12:43

凡哥 · 发表于 2024-7-22 12:43

本帖最后由凡哥于 2024-7-22 12:46 编辑

帖子代码

http://43.159.199.78/forum.php?m ... 2691&pid=496918

凡哥 · 发表于 2024-7-22 12:48

主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片融入主元素背景图片中，此法相当于PS的蒙版手法。

花简静 · 发表于 2024-7-22 14:17

凡哥发表于 2024-7-22 12:48
主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片融入主元素背景图 ...

代码PS的又一实例。。PS中蒙板太常用了。。。给个渐变，上下图层融合得很自然

花简静 · 发表于 2024-7-22 14:20

这里是代码给个线性渐变。。
-webkit-mask:linear-gradient(110deg, transparent, red);
110deg可以用to：right代替。。
不过角度的调整可以更加细微准确
透明，红色遮罩如与背景图相融合的效果。。
自然又好看

花简静 · 发表于 2024-7-22 14:22

mix-blend-mode: color-burn;小播用了颜色加深滤镜，与背景相融为一体，且看上去有透明玻璃的质感

花简静 · 发表于 2024-7-22 14:24

音乐好听，每天一曲都很特别。。

醉美水芙蓉 · 发表于 2024-7-22 21:24

播放器变色，有PS溶图的效果，老师太厉害了!

扬帆 · 发表于 2024-7-23 00:35

漂亮！心中有爱则世界宽广，眼中有光则前路明亮。

凡哥 · 发表于 2024-7-23 07:27

扬帆发表于 2024-7-23 00:35
漂亮！心中有爱则世界宽广，眼中有光则前路明亮。

[特效] 苍：序曲（蒙版应用演示）