css-doodle ：CSS涂鸦

马黑黑 · 发表于 2022-11-2 22:57

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 />（中文版）