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

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

<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 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切割的小播呀，漂亮{:4_199:}

马黑黑 发表于 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 行）。

樵歌 发表于 2025-10-13 07:11

好乖的小播，还能变色，你乖徒儿们就各取所需呗{:4_180:}

红影 发表于 2025-10-13 10:53

这个真方便，切割一个图形，然后用旋转生成子元素，一个漂亮的小播就完成了{:4_199:}

马黑黑 发表于 2025-10-13 16:34

杨帆 发表于 2025-10-12 18:01
哇，用tzMaker还可制作基于clip-path切割的小播呀，漂亮

tzMaker 就是利用css3和h5的一些功能来实现做帖指令。clip-path 是css3中成熟的一个属性

马黑黑 发表于 2025-10-13 16:35

红影 发表于 2025-10-13 10:53
这个真方便，切割一个图形，然后用旋转生成子元素，一个漂亮的小播就完成了

是的，利用 transform rotate 很省事，算度不多

马黑黑 发表于 2025-10-13 16:35

樵歌 发表于 2025-10-13 07:11
好乖的小播，还能变色，你乖徒儿们就各取所需呗

{:4_180:}

杨帆 发表于 2025-10-13 18:02

马黑黑 发表于 2025-10-13 16:34
tzMaker 就是利用css3和h5的一些功能来实现做帖指令。clip-path 是css3中成熟的一个属性

谢谢老师，有点明白了{:4_173:}

马黑黑 发表于 2025-10-13 18:17

杨帆 发表于 2025-10-13 18:02
谢谢老师，有点明白了

做帖三件套：

CSS
HTML
JS

如果有余力，还有：

SVG

至于 canvas ，它属于 JS 的一个 API，但和 svg 一样庞大

杨帆 发表于 2025-10-13 18:55

马黑黑 发表于 2025-10-13 18:17
做帖三件套：

CSS


谢谢老师~目前我习惯了三件套，SVG知晓一点点，canvas仅知道有这个东西。

看来音画贴制作需学习的东西还很多，只能跟老师好好学慢慢学坚持学{:4_173:}

马黑黑 发表于 2025-10-13 18:57

杨帆 发表于 2025-10-13 18:55
谢谢老师~目前我习惯了三件套，SVG知晓一点点，canvas仅知道有这个东西。

看来音画贴制作需学习的东西 ...

很多可以在简单教程那里学习，需要深造、研究的，去这里：

https://developer.mozilla.org/zh-CN/

杨帆 发表于 2025-10-13 19:03

马黑黑 发表于 2025-10-13 18:57
很多可以在简单教程那里学习，需要深造、研究的，去这里：

https://developer.mozilla.org/zh-CN/

哇，太高深了，目前老师发的内容还学不完呢{:4_173:}

红影 发表于 2025-10-13 20:34

马黑黑 发表于 2025-10-13 16:35
是的，利用 transform rotate 很省事，算度不多

而且想弄几个就是几个{:4_204:}

马黑黑 发表于 2025-10-13 20:53

红影 发表于 2025-10-13 20:34
而且想弄几个就是几个
对。当然，需要CSS配合。如果你画容器占一半的（比如上半部）位置的，a 角度值应该是 360，且容器的CSS得设置一下：

display: grid; place-items: start center; transfor-origin:50% 100%;
页: [1]
查看完整版本: 用tzMaker制作基于clip-path切割的小播