css-doodle嵌套
本帖最后由 马黑黑 于 2023-5-8 18:47 编辑 <br /><br /><style>.mama {
width: 100%;
position: relative;
}
.hCode, .hLineNum {
padding: 10px;
width: calc(100% - 40px);
background: #eee;
box-sizing: border-box;
tab-size: 4;
position: absolute;
}
.hCode { left: 40px; }
.hLineNum { width: 40px; background: #ccc; text-align: right; pointer-events: none; }
</style>
<p>css-doodle 图案里再嵌套一个css-doodle图案，实现方法之一是给单元格的背景属性 background 套一个 @doodle() 函数，该函数的参数是标准的 css-doodle 代码。试看如下代码：</p>
<div class="mama">
<pre class="hLineNum"></pre>
<pre class="hCode"><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></pre>
</div>
<p><br><button class="btnok" type="button" value="运行代码">运行代码</button><br><br></p>
<div class="stage"></div>
<p>代码中，我们创建了一个1x1的css-doodle网格（第2至4行），然后我们给唯一的单元格设置背景 background 属性，所使用的方法是 @doodle() 函数，函数的参数是标准的一组 css-doodle 代码（第6至第12行），它创建3x3的网格、尺寸为100%即和父元素一样的大小（第7行），形状为四叶草（第9行），背景颜色为粉红色（第10行），然后，凡单元格的行序号等于列序号的都运行关键帧动画 rot（第11行），关键帧动画需要设置在 @doodle() 函数代码块之内（第12行），设置在该代码块之外不生效，但它以及调用它的animation属性可以接收来自父元素的相关CSS变量。</p>
<p>本例只是 css-doodle 嵌套使用的方式之一，他应该拥有无限可能，但不要太贪心，嵌套太多会导致浏览器出错。</p>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script>
嵌套可以使得行序号等于列序号的的单元格执行动画。这个真厉害{:4_187:} 红影 发表于 2023-5-8 18:56
嵌套可以使得行序号等于列序号的的单元格执行动画。这个真厉害
中文版的 css-doodle 并不介绍 @doodle() 函数，开始时我没有注意到，后来才慢慢发现的 马黑黑 发表于 2023-5-8 20:11
中文版的 css-doodle 并不介绍 @doodle() 函数，开始时我没有注意到，后来才慢慢发现的
哦，那这个函数到底是什么含义呢？ 红影 发表于 2023-5-8 20:29
哦，那这个函数到底是什么含义呢？
它用于修饰 css-doodle 的元素，比如一个单元格的背景，其意思是，用 css-doodle 图案去装饰一个单元格的背景：
background: @doodle (css-doodle代码);
马黑黑 发表于 2023-5-8 20:49
它用于修饰 css-doodle 的元素，比如一个单元格的背景，其意思是，用 css-doodle 图案去装饰一个单元格的 ...
这么多功能，这个东西看的真的有点晕。 红影 发表于 2023-5-8 21:00
这么多功能，这个东西看的真的有点晕。
先理解它可以嵌套，其他以后会慢慢理解的 马黑黑 发表于 2023-5-8 21:21
先理解它可以嵌套，其他以后会慢慢理解的
嗯嗯，先看到嵌套的效果，感受一下。 红影 发表于 2023-5-8 21:32
嗯嗯，先看到嵌套的效果，感受一下。
对 红影 发表于 2023-5-8 20:29
哦，那这个函数到底是什么含义呢？
马黑黑 发表于 2023-5-8 21:53
对
至少线知道有这么回事{:4_173:} 起个网名好难 发表于 2023-5-8 22:35
哦，可以生成图片啊。谢谢难难的帮助{:4_204:} 红影 发表于 2023-5-8 22:51
至少线知道有这么回事
挺好的 马黑黑 发表于 2023-5-8 22:54
挺好的
虽然还没完全弄懂{:4_173:} 红影 发表于 2023-5-8 23:03
虽然还没完全弄懂
完全弄懂需要一个过程 看得头晕，先复制保存代码，慢慢体会试用！{:5_111:} 马黑黑 发表于 2023-5-8 23:04
完全弄懂需要一个过程
今天是不可能的。先睡觉去了{:4_173:} 红影 发表于 2023-5-8 22:53
哦，可以生成图片啊。谢谢难难的帮助
官网的Usage就相当于用法（举例）说明，看看至少可初步了解下。 红影 发表于 2023-5-8 23:09
今天是不可能的。先睡觉去了
{:4_181:} 亦是金 发表于 2023-5-8 23:08
看得头晕，先复制保存代码，慢慢体会试用！
辛苦{:4_190:}