马黑黑 发表于 2025-10-29 18:10

Unleased

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/unless.webp') no-repeat center/cover; }
        .wrap200 { right: 100px; bottom: 40px; background: radial-gradient(transparent 7%, lightgreen 7.5%, navy); clip-path: path('M0 100 A1 1 0 0 0 100 0 A1 1 0 0 0 200 100 A1 1 0 0 0 100 200 A1 1 0 0 0 0 100'); cursor: pointer; }
</style>

<div class="pa"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
        const tz = TZ.TZ('pa');
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=512298115'});
        tz.add('div', '', 'wrap200 rotate-ani').playmp3();
        tz.bgprog().style('right: 70px; bottom: 20px; color: snow');
        tz.fs().style('left: 20px; bottom: 20px');
</script>

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

帖子代码

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/unless.webp') no-repeat center/cover; }
        .wrap200 { right: 100px; bottom: 40px; background: radial-gradient(transparent 7%, lightgreen 7.5%, navy); clip-path: path('M0 100 A1 1 0 0 0 100 0 A1 1 0 0 0 200 100 A1 1 0 0 0 100 200 A1 1 0 0 0 0 100'); cursor: pointer; }
</style>

<div class="pa"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
        const tz = TZ.TZ('pa');
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=512298115'});
        tz.add('div', '', 'wrap200 rotate-ani').playmp3();
        tz.bgprog().style('right: 70px; bottom: 20px; color: snow');
        tz.fs().style('left: 20px; bottom: 20px');
</script>小播构造：小播元素的剪切路径使用SVG圆弧指令 A 设计而成。A指令时SVG中最复杂的指令，参数1、2使用百分比（或对应浮点数）可以免去对此兄弟俩的计算。

红影 发表于 2025-10-29 20:10

原来几个叶片都是绘制的，怪不得不需要旋转得到叶瓣了。
颜色渐变很漂亮{:4_199:}

杨帆 发表于 2025-10-29 20:11

漂亮！谢谢马老师精彩分享{:4_180:}

红影 发表于 2025-10-29 20:14

背景图很奇妙，也很玄幻，漂亮。
A指令又忘得差不多了，赶紧趣搜索了看看{:4_173:}

子楹。 发表于 2025-10-29 20:20

好看，

马黑黑 发表于 2025-10-29 21:46

子楹。 发表于 2025-10-29 20:20
好看，

谢看

马黑黑 发表于 2025-10-29 21:47

红影 发表于 2025-10-29 20:14
背景图很奇妙，也很玄幻，漂亮。
A指令又忘得差不多了，赶紧趣搜索了看看

A指令，看似复杂，实则简单——就看你幼儿园数学学的咋样

马黑黑 发表于 2025-10-29 21:47

杨帆 发表于 2025-10-29 20:11
漂亮！谢谢马老师精彩分享

{:4_191:}

马黑黑 发表于 2025-10-29 21:47

红影 发表于 2025-10-29 20:10
原来几个叶片都是绘制的，怪不得不需要旋转得到叶瓣了。
颜色渐变很漂亮

{:4_190:}

红影 发表于 2025-10-29 22:59

马黑黑 发表于 2025-10-29 21:47
A指令，看似复杂，实则简单——就看你幼儿园数学学的咋样

这样一说，发现我幼儿园数学也不咋样了{:4_173:}

红影 发表于 2025-10-29 23:00

马黑黑 发表于 2025-10-29 21:47


谢大咖{:4_187:}

马黑黑 发表于 2025-10-29 23:01

红影 发表于 2025-10-29 22:59
这样一说，发现我幼儿园数学也不咋样了

就是，只是学的时候不当真

杨帆 发表于 2025-10-29 23:01

马黑黑 发表于 2025-10-29 21:47
A指令，看似复杂，实则简单——就看你幼儿园数学学的咋样

感觉A指令还是比较复杂的~

请教马老师：为何路径是一个圆角菱形，裁剪出来就成4个了，可以是6个吗？

马黑黑 发表于 2025-10-29 23:04

杨帆 发表于 2025-10-29 23:01
感觉A指令还是比较复杂的~

请教马老师：为何路径是一个圆角菱形，裁剪出来就成4个了，可以是6个吗？

不同顶点数，出来的效果不一样，我这个设计，唯有4个时像花瓣

朵拉 发表于 2025-10-29 23:57

老师好，学生已交作业，请指正{:4_190:}

杨帆 发表于 2025-10-30 11:12

马黑黑 发表于 2025-10-29 23:04
不同顶点数，出来的效果不一样，我这个设计，唯有4个时像花瓣

谢谢老师~用SVG圆弧指令 A 设计路径，效果取决于顶点数，这个剪切路径效果本来就是4个？{:4_173:}

梦江南 发表于 2025-10-30 11:49

漂亮！黑黑老师辛苦！{:4_187:}

马黑黑 发表于 2025-10-30 12:51

梦江南 发表于 2025-10-30 11:49
漂亮！黑黑老师辛苦！

{:4_190:}

马黑黑 发表于 2025-10-30 12:53

杨帆 发表于 2025-10-30 11:12
谢谢老师~用SVG圆弧指令 A 设计路径，效果取决于顶点数，这个剪切路径效果本来就是4个？

里面有来源：基于外切圆顶点的结构性的构图方式，取4个顶点数就是现在的这个效果，其余数值效果各异，但都不会是花朵一样的形状。
页: [1] 2
查看完整版本: Unleased