流水
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/lquv.webp') no-repeat center/cover; --r: 20%; perspective: 1000px; }
#pa::after { content: ''; position: absolute; aspect-ratio: 1/1; width: 100%; height: 100%; background: var(--bg); clip-path: circle(var(--r)); transition: 2s; }
#pa:hover { --r: 0; }
#ma { transform-style: preserve-3d; }
#ma:hover li-zi { filter: hue-rotate(60deg) opacity(.7); }
li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(circle at 10% 10%, darkgreen, green); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px yellow, 2px 4px 16px rgba(0,0,0,.35); transform-origin: 100% 100%; transition: 1s; }
#btnFs { bottom: 20px; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=494645052" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/23/43/45/video63629031a430e.mp4" autoplay loop muted>123</video>
<div id="ma"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
const tt = 12;
Array.from({length: tt}).forEach( (lz,idx) => {
lz = document.createElement('li-zi');
lz.style.cssText += `transform: rotate3d(0, -0.5, 1, ${idx * 360 / tt}deg);`;
ma.appendChild(lz);
});
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/lquv.webp') no-repeat center/cover; --r: 20%; perspective: 1000px; }
#pa::after { content: ''; position: absolute; aspect-ratio: 1/1; width: 100%; height: 100%; background: var(--bg); clip-path: circle(var(--r)); transition: 2s; }
#pa:hover { --r: 0; }
#ma { transform-style: preserve-3d; }
#ma:hover li-zi { filter: hue-rotate(60deg) opacity(.7); }
li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(circle at 10% 10%, darkgreen, green); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px yellow, 2px 4px 16px rgba(0,0,0,.35); transform-origin: 100% 100%; transition: 1s; }
#btnFs { bottom: 20px; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=494645052" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/23/43/45/video63629031a430e.mp4" autoplay loop muted>123</video>
<div id="ma"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
const tt = 12;
Array.from({length: tt}).forEach( (lz,idx) => {
lz = document.createElement('li-zi');
lz.style.cssText += `transform: rotate3d(0, -0.5, 1, ${idx * 360 / tt}deg);`;
ma.appendChild(lz);
});
</script>
本帖最后由 马黑黑 于 2025-7-28 20:01 编辑
tz01.css 相关说明请查阅：https://www.huachaowang.com/foru ... 339453&fromuid=7130
小播：
（一）构造
<div id="ma"></div> 是小播标签，该标签内装载12个子元素，对应 li-zi 选择器，弄成叶片的模样，以3d转换形式绕 ma 的中心点在Z轴上依次旋转一定角度到达自己的位置，在Y轴上也略作倾斜以便完美地在 ma 中心点衔接。li-zi叶片的生成由JS实现。
叶片固定后不做关键帧动画，小播的旋转由 ma 完成，是 2d rotate 旋转。
（二）:hover交互
因为叶片的构成通过3d transform构成，其父元素 ma 最好不使用 CSS filter 和脱胎于filter的单独的 opacity 属性，使用了就会“露馅”，即，容器 ma 的 transform-style: preserve-3d 的设置会自动回退到 flat 形态，3d坍塌。所以，帖子CSS代码中，专门设置了 #ma:hover li-zi {...} 伪类选择器，将 filter 滤镜直接作用于 li-zi 而非 ma，这样可以保证 ma 的3d渲染形态不会被破坏。若小播是 2d 形态，无需设计这个复合伪类，直接在 ma 的 HTML 代码中加入 class=“hue-rotate” 之类的语句即可启用 tz01.css 设定的 hover 交互功能。
（三）遮罩
鼠标指针移入移出帖子区域小播都有响应：移入小播出现，移出小播消失。这是用了 #pa::after {...} 即帖子容器的伪元素实现的：伪元素使用与帖子容器相同的背景图片及其设置，开始是用切割路径（clip-path）的圆形切割函数 circle(radius) 切去80%，仅保留 20%，刚好略大于小播的整体尺寸，小播被遮挡；鼠标指针移入、移出动作响应 #pa:hover { --r: 0; } 伪类选择器的设置，移入时将切割半径变量 --r 变为0，即保留的伪元素是 0 像素的圆周，就是割完了，伪元素不见了，小播就完整出来了；移出时自动回复到 --r 的初始值 20%。
奇妙的构思，简约的代码，美妙的效果，谢谢马老师精彩分享{:4_191:} 原来小播开始是被同样位置的截取的底图遮挡了，触碰后遮挡的底图被切掉了，小播就又出来了。
开始的20还可以再大点的吧，小了不行，会露出小播，大了应该没事吧{:4_173:} 构思真奇妙，而且是前面那个CSS封装的运用呢，真好{:4_199:} 红影 发表于 2025-7-28 20:46
原来小播开始是被同样位置的截取的底图遮挡了，触碰后遮挡的底图被切掉了，小播就又出来了。
开始的20还可 ...
大一点没问题 红影 发表于 2025-7-28 20:48
构思真奇妙，而且是前面那个CSS封装的运用呢，真好
{:4_190:} 马黑黑 发表于 2025-7-28 20:56
大一点没问题
大一点更保险{:4_173:} 马黑黑 发表于 2025-7-28 20:57
用圆形的遮挡也很好看呢。 红影 发表于 2025-7-28 22:48
大一点更保险
合适就好。
也可以将小播设为固定宽高，酱紫一切好把握。 红影 发表于 2025-7-28 22:49
用圆形的遮挡也很好看呢。
圆是漂亮的。你看人家形容镁铝都用圆圆的脸蛋儿造句{:4_170:} 马黑黑 发表于 2025-7-29 12:45
合适就好。
也可以将小播设为固定宽高，酱紫一切好把握。
嗯嗯，两个适应就好。 马黑黑 发表于 2025-7-29 12:46
圆是漂亮的。你看人家形容镁铝都用圆圆的脸蛋儿造句
这话说的，人脸本来就是圆的，如果把方得说成圆的，才真的怪异呢{:4_173:} 红影 发表于 2025-7-29 13:36
这话说的，人脸本来就是圆的，如果把方得说成圆的，才真的怪异呢
矮油，国字脸的帅妹肿么说 红影 发表于 2025-7-29 13:35
嗯嗯，两个适应就好。
是酱的 马黑黑 发表于 2025-7-29 13:46
矮油，国字脸的帅妹肿么说
就算是国字脸，相对于方形的来说，也算圆呢。 马黑黑 发表于 2025-7-29 13:46
是酱的
相互适应就不会出问题。 红影 发表于 2025-7-29 20:24
相互适应就不会出问题。
有道理 红影 发表于 2025-7-29 20:24
就算是国字脸，相对于方形的来说，也算圆呢。
额，也是，国字的框框是有人写成圆的