请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-5-8 18:47 编辑
css-doodle 图案里再嵌套一个css-doodle图案，实现方法之一是给单元格的背景属性 background 套一个 @doodle() 函数，该函数的参数是标准的 css-doodle 代码。试看如下代码：
<css-doodle>
:doodle {
@grid: 1 / 400px;
}
background: @doodle(
:doodle {
@grid: 3 / 100%;
}
@shape: clover 4;
background: pink;
@match(@row=@col) { animation: rot 6s infinite linear; }
@keyframes rot { to { transform: rotate(360deg); } }
);
</css-doodle>
代码中，我们创建了一个1x1的css-doodle网格（第2至4行），然后我们给唯一的单元格设置背景 background 属性，所使用的方法是 @doodle() 函数，函数的参数是标准的一组 css-doodle 代码（第6至第12行），它创建3x3的网格、尺寸为100%即和父元素一样的大小（第7行），形状为四叶草（第9行），背景颜色为粉红色（第10行），然后，凡单元格的行序号等于列序号的都运行关键帧动画 rot（第11行），关键帧动画需要设置在 @doodle() 函数代码块之内（第12行），设置在该代码块之外不生效，但它以及调用它的animation属性可以接收来自父元素的相关CSS变量。
本例只是 css-doodle 嵌套使用的方式之一，他应该拥有无限可能，但不要太贪心，嵌套太多会导致浏览器出错。
| 
发表于 2023-5-8 18:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-5-8 22:35
