Unleased

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/unless.webp') no-repeat center/cover; }
   
4.         .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; }
   
5. </style>
   
6. 
   
7. <div class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
    
11.         const tz = TZ.TZ('pa');
    
12.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=512298115'});
    
13.         tz.add('div', '', 'wrap200 rotate-ani').playmp3();
    
14.         tz.bgprog().style('right: 70px; bottom: 20px; color: snow');
    
15.         tz.fs().style('left: 20px; bottom: 20px');
    
16. </script>

复制代码

小播构造：小播元素的剪切路径使用SVG圆弧指令 A 设计而成。A指令时SVG中最复杂的指令，参数1、2使用百分比（或对应浮点数）可以免去对此兄弟俩的计算。

红影

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

杨帆

漂亮！谢谢马老师精彩分享

红影

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

子楹。

好看，

马黑黑

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

谢看

马黑黑

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

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

马黑黑

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

马黑黑

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

红影

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

这样一说，发现我幼儿园数学也不咋样了

红影

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

谢大咖

马黑黑

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

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

杨帆

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

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

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

马黑黑

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

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

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

朵拉

老师好，学生已交作业，请指正

杨帆

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

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

梦江南

漂亮！黑黑老师辛苦！

马黑黑

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

马黑黑

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

里面有来源：基于外切圆顶点的结构性的构图方式，取4个顶点数就是现在的这个效果，其余数值效果各异，但都不会是花朵一样的形状。