用tzMaker制作基于clip-path切割的小播

马黑黑 · 发表于 2025-10-12 17:47

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

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

x

马黑黑 · 发表于 2025-10-12 17:48

代码

<style>
.pa {
margin: 20px auto;
width: 700px;
height: 400px;
border: 1px solid gray;
display: grid;
place-items: center;
position: relative;
}
.player {
position: absolute;
width: 300px;
height: 300px;
display: grid;
place-items: center;
}
.rect {
position: absolute;
width: 35%;
height: 95%;
background: var(--cc);
clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
-webkit-clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.trial.js?v1';
const tz = TZ.TZ('pa');
tz.add('div', 'lz-pa', 'player');
tz.lzRot(3, 'lz-pa', { className: 'rect', a: 180 });
</script>

复制代码

杨帆 · 发表于 2025-10-12 18:01

哇，用tzMaker还可制作基于clip-path切割的小播呀，漂亮

马黑黑 · 发表于 2025-10-12 18:01

CSS：

需要准备必要的选择器，这里，帖子父元素 class="pa" 使用的 .pa {}，小播容器 .player {}，小播内的子元素 .rect {}，实际上还需要添加关键帧动画 @keyframes 以及给 .player 加入 animation 属性。

若配套使用CSS资源文档，CSS代码会简洁一些。

HTML：

只需帖子容器即可。新的 tz.c.trial 及其以后版本均能识别 id 和 class，二者使用其一，建议使用 id。

JS：

第34行：添加小播容器元素，它是一个 div，id="lz-pa"，class=“player”（其中，id 方便后续引用，class对应于CSS选择器）；

第35行：生成 3 个子元素，添加给 id="lz-pa" 的小播容器标签，这三个子元素对应的选择器名称是 .rect，在 HTML 代码中是 class="rect"，旋转角度 a 设为 180度，tag 即标签名没有设置，tzMaker 默认为 div。注意CSS配套，变量 --cc 是给旋转子元素上背景色专用（代码第 22 行）。