css-doodle 学习第一天

1、学习css-doodle的起因

在写网页的过程中被css-doodle吸引了，什么是css-doodle呢？

css-doodle是一个用来绘制CSS图案的WEB组件，它是基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中，但是目前为止该组件只能够在最新的Chrome和Safari浏览器上运行。

它的官网地址：https://css-doodle.com/

组件的作者的codepen地址：点击预览https://codepen.io/yuanchuan/

2、js文件

官网推荐的 css-doodle 使用方法是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.2/css-doodle.min.js"></script>

<css-doodle>
  /* 这里写画图代码 */
</css-doodle>

我比较懒，喜欢从本地加载，在网上找了一份文件，放在这供大家使用

链接：https://pan.baidu.com/s/1FRudo14UHwI9ymlhCxyjqw
提取码：e07x

解压后是这个样子的：

css-doodle 学习第一天

css-doodle.min.js这个文件就是我们写网页时候需要导入的js文件，直接用script标签导入就可以使用了，在docs文件夹中有一个index.html文件，那个是官网，也就是api，不过是英文的。

3、结尾

这篇文章主要介绍如何什么是css-doodle以及如何使用css-doodle，就到这里了，下篇见

css-doodle 学习第一天

相关推荐