华墟 - 马黑黑教程专版 - 花潮论坛

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

华墟

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

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa {
--offsetX: 81px;
--bg: #fff url('https://638183.freep.cn/638183/t24/w5/hxxu.webp') no-repeat center/cover;
--per: 15px;
--ma-size: 15%;
mask: conic-gradient(red 0 25%, rgba(0,0,0,.95) 0) center / var(--per) var(--per);
-webkit-mask: conic-gradient(red 0 25%, rgba(0,0,0,.95) 0) center / var(--per) var(--per);
}
#ma {
background: orange radial-gradient(circle, darkred 70%, transparent 75%, transparent) 0 0 / 4% 4%;
left: 5%;
mask: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover;
-webkit-mask: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover;
}
#btnFs { left: 20px; bottom: 20px; color: #eee; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1478143442" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2414777/00/02/12/5b514d29ccc07.mp4" autoplay loop muted></video>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/19/35/video64edb827bb149.mp4" autoplay loop muted></video>
<div id="ma" class="grayscale"></div>
</div>

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

var per = 15, step = 0.01, 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> 15 || per < 1.5) step = -step;
pa.style.setProperty('--per', `${per}px`);
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-18 08:15

和昨天的幻灭一样，直接对帖子容器使用 mask 遮罩，box-shaodw 或 filter drop-shadow 的外阴影出不来。原理之前谈过，简单说就是阴影被遮挡掉了。

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

需要保留阴影的话，可以考虑将在伪元素上实现遮罩：伪元素 ::before 负责渲染背景图片，对它进行遮罩处理；主元素背景为空。

杨帆发表于 2025-8-18 08:50

漂亮，谢谢马老师精彩分享{:4_191:}

花飞飞 发表于 2025-8-18 09:47

这个大背景上用了锥形渐变遮罩，--per: 15px;起始尺寸，
mask: conic-gradient(red 0 25%, rgba(0,0,0,.95) 0) center / var(--per) var(--per);
锥形只显示四分之一，看上去就是一个小点，并且宽高会同时变大或者变小，
循环往复，背景看上去呈像素状。。

花飞飞 发表于 2025-8-18 09:54

小播是橙色底，用了径向渐变，强制为正圆，设置为宽高4%的小圆点。。。
小圆点边缘还设了过渡，显得更加自然。。
这个橙底红点的大背景，通过图案遮罩，就成为图案形状上加上小圆点的效果
处处都是细节，设计太精巧啦{:4_199:}

花飞飞 发表于 2025-8-18 09:59

背景用的是两层视频进行渲染，与小播色彩统一协调。。。
音乐鼓点密集，激昂振奋，描绘一场宏大的战争场面。。
这是周一上班的节奏啊。。{:4_173:}

花飞飞 发表于 2025-8-18 10:01

马黑黑发表于 2025-8-18 08:17
需要保留阴影的话，可以考虑将在伪元素上实现遮罩：伪元素 ::before 负责渲染背景图片，对它进行遮罩处理； ...

两个不同的贴子对比，看到阴影效果了，
伪元素遮罩不影响背景阴影设置的吧。
直接在背景遮罩会影响{:4_173:}

偶然~ 发表于 2025-8-18 10:56

制作大气

偶然~ 发表于 2025-8-18 10:56

音乐唯美

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

偶然~ 发表于 2025-8-18 10:56
音乐唯美

感谢支持

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

偶然~ 发表于 2025-8-18 10:56
制作大气

{:4_190:}

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

杨帆发表于 2025-8-18 08:50
漂亮，谢谢马老师精彩分享

{:4_190:}

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

花飞飞发表于 2025-8-18 09:47
这个大背景上用了锥形渐变遮罩，--per: 15px;起始尺寸，
mask: conic-gradient(red 0 25%, rgba(0,0,0,.95 ...

解读准确

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

花飞飞发表于 2025-8-18 09:54
小播是橙色底，用了径向渐变，强制为正圆，设置为宽高4%的小圆点。。。
小圆点边缘还设了过渡，显得更加自 ...

理解正确

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

花飞飞发表于 2025-8-18 10:01
两个不同的贴子对比，看到阴影效果了，
伪元素遮罩不影响背景阴影设置的吧。
直接在背景遮罩会影响{:4_ ...

嗯，这是阴影被遮罩了

花飞飞 发表于 2025-8-18 17:54

马黑黑发表于 2025-8-18 12:43
解读准确

貌似之前贴子里有出现过的，这复习比新课接收快一丢丢

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

马黑黑发表于 2025-8-18 12:43
理解正确

理解万岁，万一理解错了更麻烦

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

马黑黑发表于 2025-8-18 12:44
嗯，这是阴影被遮罩了

对比一下看得更明显

页: [1] 2 3 4

花潮论坛's Archiver

华墟