css-doodle ：CSS涂鸦
本帖最后由 马黑黑 于 2022-11-2 23:02 编辑css-doodle是袁川大佬经营多年的作品，基于CSS grid而做的JS框架，使用它，可以轻松涂鸦各种CSS图案。试看下面的代码：
这会得出如下效果：
这是最基本的 css-doodle 应用范例。我们来理解一下代码：
一、引用 JS 框架。css-doodle.min.js 是压缩文档，80kb不到，可以下载到自己的电脑并引用本机上的文档，这里是使用 cdn 上的文档：
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.min.js"></script>
二、在HTML代码中写css-doodle代码。这里，我用一个div包裹它，也可以不用：
<div id="papa">
<css-doodle>
:doodle {
@grid: 6 / 360px;
gap: 1px;
}
background: lightblue;
::after {
content: @index;
color: #4f4f4f;
}
</css-doodle>
</div>
① <css-doodle> ... </css-doodle> 标签用于收纳 css-doodle 代码，css-doodle 代码必须写在该标签内；
② :doodle {} 用以描述涂鸦（doodle）的相关属性，相当于一个涂鸦标签，有点像父框的样纸；
③ @grid: 6 / 360px;这句，用 @ 做前缀带出grid的定义，@grid 是doodle的一个属性，6表示 6x6 的网格，/ 号之后是 doodle 父框的大小，360px 表示 360x360 的宽高；
④ gap: 1px; 标准的写法是 grid-gap，因为CSS3允许写成 gap，我测试一下，没问题；
⑤ :doodle {} 之后的代码是描述其下子元素的，也就是 :doodle {} 里面规定的 6x6 的网格单元格：
background: lightblue; 这句是设置单元格的背景颜色；
::after {
content: @index;
color: #4f4f4f;
}
::after 正确的写法是 :after，因为是伪元素，CSS3规定用两个冒号，我也测试一下看看行不行，没问题，不过还是建议写一个冒号的。css-doodle用伪元素来填写单元格内容，content: @index; 就是内容，@index 属性 可以简写成 @i ，表示单元格索引号，从 1 开始；color: 4f4f4f; 设置伪元素的文本颜色。
简简单单几行代码，难度也不大，但很强大。当然，css-doodle 不仅只能画个表格，大家如有兴趣，可以去官网领略它的惊艳：
<css-doodle />（中文版）
去看了，可以画出很多神奇的图案呢{:4_187:} 红影 发表于 2022-11-3 08:40
去看了，可以画出很多神奇的图案呢
学习成本也不会很高，有一定JS、CSS基础的（CSS尤其需要有 grid 布局基础知识），估计可以边看说明变使用 马黑黑 发表于 2022-11-3 12:50
学习成本也不会很高，有一定JS、CSS基础的（CSS尤其需要有 grid 布局基础知识），估计可以边看说明变使用
看着很神奇，等回来好好去学习一下{:4_204:} 红影 发表于 2022-11-3 16:49
看着很神奇，等回来好好去学习一下
这个可以学学，用得好你会惊艳你自己 马黑黑 发表于 2022-11-3 19:01
这个可以学学，用得好你会惊艳你自己
那么神奇啊{:4_173:} 红影 发表于 2022-11-3 22:00
那么神奇啊
应该是的。到目前止，基于 CSS grid 封装的东西，数这个最好 马黑黑 发表于 2022-11-3 22:05
应该是的。到目前止，基于 CSS grid 封装的东西，数这个最好
黑黑一定看了很多，才有这样的比较{:4_204:} 红影 发表于 2022-11-3 22:21
黑黑一定看了很多，才有这样的比较
也只能说瞧瞧，新出来的框架总要去看个大概，觉得好就会试试
页:
[1]