大雅无曲
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2025/daya.webp') no-repeat center/cover; --ma-size: 20%; --rot: 0; }
#pa::before { position: absolute; content: url('https://638183.freep.cn/638183/small/2025/cat.webp'); scale: 0.5; transform: rotate(var(--rot)); opacity: 0; transition: 1.6s; }
#pa:hover::before { opacity: 1; scale: 1; }
#ma { bottom: 50px; }
#ma::after { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: repeating-conic-gradient(yellow, transparent, gold 10%), url('https://638183.freep.cn/638183/t22/gif/121.gif'); background-blend-mode: screen; clip-path: url(#svgPath); }
#btnFs { bottom: 20px; color: #eee; }
</style>
<svg width="0" height="0">
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M1,0.5 Q0.484,0.5,0.879,0.826 Q0.484,0.5,0.574,1 Q0.484,0.5,0.227,0.94 Q0.484,0.5,0,0.674 Q0.484,0.5,0,0.326 Q0.484,0.5,0.227,0.06 Q0.484,0.5,0.574,0 Q0.484,0.5,0.879,0.174 Q0.484,0.5,1,0.5" />
</clipPath>
</svg>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32640490" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/01/66/5b47f632c4864.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var clickNum = 0;
const clickCircle = (e, r = 70) => {
var cx = pa.clientWidth / 2 + 20, cy = pa.clientHeight / 2 - 40, px = e.offsetX, py = e.offsetY;
return (cx - px) ** 2 + (cy - py) ** 2 < r ** 2;
};
pa.onmousemove = (e) => pa.style.cursor = clickCircle(e) ? 'pointer' : 'default';
pa.onclick = (e) => {
if (!clickCircle(e)) return;
clickNum ++;
pa.style.setProperty('--rot', clickNum + 'turn');
};
</script> <div class="codebox" data-title="帖子代码">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2025/daya.webp') no-repeat center/cover; --ma-size: 20%; --rot: 0; }
#pa::before { position: absolute; content: url('https://638183.freep.cn/638183/small/2025/cat.webp'); scale: 0.5; transform: rotate(var(--rot)); opacity: 0; transition: 1.6s; }
#pa:hover::before { opacity: 1; scale: 1; }
#ma { bottom: 50px; }
#ma::after { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: repeating-conic-gradient(yellow, transparent, gold 10%), url('https://638183.freep.cn/638183/t22/gif/121.gif'); background-blend-mode: screen; clip-path: url(#svgPath); }
#btnFs { bottom: 20px; color: #eee; }
</style>
<svg width="0" height="0">
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M1,0.5 Q0.484,0.5,0.879,0.826 Q0.484,0.5,0.574,1 Q0.484,0.5,0.227,0.94 Q0.484,0.5,0,0.674 Q0.484,0.5,0,0.326 Q0.484,0.5,0.227,0.06 Q0.484,0.5,0.574,0 Q0.484,0.5,0.879,0.174 Q0.484,0.5,1,0.5" />
</clipPath>
</svg>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32640490" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/01/66/5b47f632c4864.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var clickNum = 0;
const clickCircle = (e, r = 70) => {
var cx = pa.clientWidth / 2 + 20, cy = pa.clientHeight / 2 - 40, px = e.offsetX, py = e.offsetY;
return (cx - px) ** 2 + (cy - py) ** 2 < r ** 2;
};
pa.onmousemove = (e) => pa.style.cursor = clickCircle(e) ? 'pointer' : 'default';
pa.onclick = (e) => {
if (!clickCircle(e)) return;
clickNum ++;
pa.style.setProperty('--rot', clickNum + 'turn');
};
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 小播：
（1） #ma 伪元素构图，背景为一张图片+一个重复性角向渐变、使用screen背景融合，代码在第 7 行；
（2）使用 clip-path 属性对伪元素进行剪裁（代码在第 7 行），svg标签需要显性写出，宽高设置为 0 以避免其占位、影响帖子布局，该svg标签带一个子元素 <clipPath ... /> 用以规划剪裁路径，带 id 以便CSS能够引用，代码在 11~15 行。
猫：
#pa 伪元素做成，伪元素内容使用 url() 函数，因此它将依据图片的尺寸决定自己的尺寸，因为偏大，所以使用 scale 属性将其缩小一半（代码在第 4 行）；猫开始时不可见。猫有两种交互方式：其一，设备指针移入帖子时猫可见、变大（代码在第 5 行）；其二，猫图像出现手型指针形状时点击猫，猫会转动一圈。
猫的转动通过JS实现：首先，设计一个变量 clickNum 存储点击数（代码 25 行），设计一个 clickCircle() 函数用以检测点击点是否在指定的圆形范围内（代码 26~29）；其次，分别处理设备指针移动和点击事件，代码分别在 30 行（移动）、31~34行（点击）——移动处理的是鼠标指针形状、点击处理的是猫的翻转动作。 马黑黑 发表于 2025-8-8 08:07
小播：
（1） #ma 伪元素构图，背景为一张图片+一个重复性角向渐变、使用screen背景融合，代码在 ...
代码看上去简洁小巧，便于携带。。。功能强大，效果惊艳。。{:4_173:}
联想到现实中物品的设计，具有这样特点的都受人欢迎 小猫是背景的伪元素，所以只要触碰到背景就能按要求出现，放大。。这个容易看出来
点击猫脸做动作旋转的设计，像是撸猫时它给的反映，哈哈，这个生活化，真是活了。。
用JS实现的呀，懵着瞅一眼。。假装看过了{:4_170:}
艾玛，原来点猫脸的范围也是设定的。。。只有在这个范围才能触发 点击并做动作。。
这设计精巧的超硅基思维。。太厉害了。。 小播是昨天发的路径剪切效果，
这里看到了不仅小播设计的渐变色，
还用了星星点点的GIF做背景图片，还用了滤镜把黑背景去掉。。。
宽高为0昨天有出现过，但上下左右全部特定设为0，还是第一次看到。。 整个静态室景搭配金色粒子，作品色彩高级，跟代码和写代码的人一样奢华低调。。。音乐舒缓，娓娓动听。。 这个有趣，猫咪会自动出现。音乐也养心。{:4_190:} 原来小播可以同时加颜色背景和图片背景呢。这个重复锥形渐变设置很漂亮，融合的图片也漂亮。
这裁剪就是昨天的例子里的吧，比昨天的例子里的多了几个角。{:4_187:} 小猫咪触碰会出现，这个在别的帖子里有过类似的，点击会旋转，这个还是头一次出现。
需要设置和判断点击范围，还有判断点击数量。连续点了几下，小猫咪转个不停{:4_173:} 生活气息浓郁，谢谢马老师经典讲授与精彩示范{:4_190:} 有个事请教马老师，上传html文件到棱束链，为什么打不开？要怎么设置吗？非常感谢~！ 花飞飞 发表于 2025-8-8 08:29
代码看上去简洁小巧，便于携带。。。功能强大，效果惊艳。。
联想到现实中物品的设计，具有这 ...
你要带去哪儿{:4_170:} 大气唯美 花飞飞 发表于 2025-8-8 08:43
小播是昨天发的路径剪切效果，
这里看到了不仅小播设计的渐变色，
还用了星星点点的GIF做背景图片，还用 ...
宽高为 0 的是svg，它不用显示、不占位但是不能没有；
上下左右属性都为 0 的在本帖是伪元素。伪元素也是元素，自成一体但依赖于宿主元素。一个绝对定位的元素对于其父元素而言（父元素也应该设置好定位），当上、下、左、右都是 0 则表明该元素的宽高与宿主元素相一致且彼此重叠，这等同于子元素的如下属性集合：
left: 0;
top: 0;
width: 100%;
height: 100%; 花飞飞 发表于 2025-8-8 08:45
整个静态室景搭配金色粒子，作品色彩高级，跟代码和写代码的人一样奢华低调。。。音乐舒缓，娓娓动听。。
这客厅的装修是低调但不奢华，简直是奢侈了{:4_170:} 梦江南 发表于 2025-8-8 10:14
这个有趣，猫咪会自动出现。音乐也养心。
{:4_190:} 红影 发表于 2025-8-8 10:22
原来小播可以同时加颜色背景和图片背景呢。这个重复锥形渐变设置很漂亮，融合的图片也漂亮。
这裁剪就是昨 ...
角向（锥形）渐变越接近边缘越难看，剪掉边缘没商量，所以clip-path 属性用于此处很恰当。怎么剪值得考量，我的看法是叫可能顺应锥形渐变的纹理，多一角，但也不宜太多。 红影 发表于 2025-8-8 10:47
小猫咪触碰会出现，这个在别的帖子里有过类似的，点击会旋转，这个还是头一次出现。
需要设置和判断点击范 ...
猫咪的转圈动作也可以放在 css *:hover 中实现，和既有的变化合在一起。单独用JS设置单独的动作也是好思路，同时借此演示一下特定范围（区域）的点击处理。 杨帆 发表于 2025-8-8 11:51
生活气息浓郁，谢谢马老师经典讲授与精彩示范
{:4_191:}