流水

马黑黑 · 发表于 2025-7-28 17:57

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

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

x

马黑黑 · 发表于 2025-7-28 17:58

帖子代码

<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 17:59

本帖最后由马黑黑于 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%。