前言

上一次深扒CSS的时候，还说CSS和H5绘制复杂图形很麻烦，看了大神的操作后，感觉茅塞顿开了，哈哈。

就算可能我暂时没有用到的机会，学习一下开发者的设计思路也是受益匪浅呀。

嗯，今天要介绍的是一个制作web图案的组件——css-doodle。

使用css-doodle可以很快的绘制一些规律性图形、动画。

使用css-doodle，只需要编辑10来行代码，就可以得到下面这些图案效果。

作者在他的codepen上放了很多实例，大家可以先去看看。

css-doodle挺受欢迎的，codepen上有它的画廊。

css-doodle官网:https://css-doodle.com/

原理

<css-doodle/>使用Custom Elements、Shadow DOM和CSS Grid来创建css图案。

Custom Elements（自定义元素）、Shadow DOM（影子节点）是前端框架的自定义组件中基本都会用到的

css涂鸦这样玩的更多相关文章

  1. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  2. css页面网址

    前端必看的文章 1.CSS设置居中的方案总结  https://juejin.im/post/5a7a9a545188257a892998ef 2.阮一峰老师的网站 http://www.ruanyi ...

  3. 轻量级的日期插件--datebox

    jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功 ...

  4. 我对C#的认知。

    关于开发者的技术水平到底该如何定义,到底一个人的技术水平应该定位在高.中.低的标准是什么呢?很多人觉得这是一个仁者见仁的问题,有人觉得根据公司的那个员工等级判断.答案是肯定不是,从纯开发技术的角度来分 ...

  5. Python3 与 C# 面向对象之～继承与多态 Python3 与 C# 面向对象之～封装 Python3 与 NetCore 基础语法对比（Function专栏） [C#]C#时间日期操作 [C#]C#中字符串的操作 [ASP.NET]NTKO插件使用常见问题 我对C#的认知。

    Python3 与 C# 面向对象之-继承与多态   文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录: 2.继承 ¶ 2.1.单继 ...

  6. wx小程序笔记

    目录 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css 零基础玩转微信小程序[黑马程序员] https://www.bilibili.com/vid ...

  7. .net 技术大全

    我常说C#的入门技术是委托.事件.消息.只有当你可以纯熟运用这三个技能的时候,才刚刚入门,此时C#的大门才算正式为你打开.很多人在学了一些语法编写一些项目后就觉得C#精通了,其实你们还没入门呢(对日开 ...

  8. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

随机推荐

  1. Https与Http的区别以及Https的解说

    http:信息不加密,具有信息被盗的危险 https:信息加密,第三获取原信息 1:https多了一层SSL,而这一层的设计是为了达到如下的 (1) 所有信息都是加密传播,第三方无法窃听. (2) 具 ...

  2. redis的几个知识点

    Redis的全称是Remote Dictionary Server,即远程字典服务,通常用作服务器缓存服务. 这里通过Redis的几个知识点来了解Redis. Redis的通讯协议 Redis的通讯协 ...

  3. CentOS在VMware中的安装

    1.启动VMware 2.新建一台虚拟机,选择典型 3.选择稍后安装操作系统 4.选择引导系统为Linux,系统版本为Centos 5.选择安装位置 6.选择最大磁盘容量 7.点击自定义硬件,进行硬件 ...

  4. SpringCloud微服务笔记-Nginx实现网关反向代理

    背景 当前在SpringCloud微服务架构下,网关作为服务的入口尤为重要,一旦网关发生单点故障会导致整个服务集群瘫痪,为了保证网关的高可用可以通过Nginx的反向代理功能实现网关的高可用. 项目源码 ...

  5. springboot应用在tomcat中运行

    1.将打包方式改成war,因为如果是java -jar xx.jar方式运行,一定是jar包 <packaging>war</packaging> 2.添加tomcat的依赖, ...

  6. 简述python的turtle绘画命令及解释

    一 基础认识 turtle库是python的标准库之一,它是一个直观有趣的图形绘制数据库,turtle(海龟)图形绘制的概念诞生1969年.它的应用十分广,而且使用简单,只要在编写python程序时写 ...

  7. SpringBoot数据聚合（spring-boot-data-aggregator-starter）

    背景 接口开发是后端开发中最常见的场景, 可能是RESTFul接口, 也可能是RPC接口. 接口开发往往是从各处捞出数据, 然后组装成结果, 特别是那些偏业务的接口. 例如, 我现在需要实现一个接口, ...

  8. ibatis 学习

    1.$与#的区别: 用到#和$来获取传的参数值,其中#是将传来的值替换(如果是字符串,会将‘’带着替换,比如上面$value$,用#value#的话,就会出错.#与$的使用区别:$中间的变量就是直接替 ...

  9. 【SQL server基础】获取当前时间并固定格式

    Select CONVERT(varchar(), GETDATE(), ): // Select CONVERT(varchar(), GETDATE(), ): Select CONVERT(va ...

  10. 基于C#的机器学习--机器学习建模的基础

    构建ML模型的步骤 现在我们已经看了解到了一些ML应用程序的例子,问题是,我们如何构建这样的ML应用程序和系统? 下图总结了我们使用ML开发应用程序的方法,我们将在下面更详细地讨论这个问题: 如上图所 ...