css-doodle初认识

赵连江发布于2019-08-30 15:53 / 403人阅读

摘要：详见另外这样写的话，就代表行列，宽度为，高度为若只写一个，那么行列相同，宽度和高度也相同。最后再推荐大漠老师写的文章，有更加详细的说明一个制作图案的组件除此之外，官网还有更多变量说明，也有的接口，希望你能用它创造出更多美丽惊艳的效果。

前言

css-doodle是一个用来绘制CSS图案的WEB组件，
请允许我先放上它的官网地址：https://css-doodle.com/
再请允许我放上组件的作者的codepen地址：https://codepen.io/yuanchuan/

以下是来自codepen中使用css-doodle制作出来的一些成品：

一个例子

下面是来自官网的一个例子，在HTML中引入以下代码：


  :doodle {
    @grid: 7 / 100vmax;
    background: #0a0c27;
  }

  @shape: clover 5;
  background: hsla(
    calc(360 - @index() * 4),
    70%, 68%, @rand(.8)
  );
  transform:
    scale(@rand(.2, 1.5))
    translate(
      @rand(-50%, 50%), @rand(-50%, 50%)
    );

效果如下图所示:

通过这个代码，我们大概能够看出一些东西！

布局

:doodle这个选择器选中的是这个标签。
@grid的使用可以猜得到实质上它是用了CSS3的Grid布局，在控制台中就能看出这个布局，一行分了7个格子：

另外vmax这个单位也是CSS3中的表示尺寸的单位，意思是取宽度和高度大的那个作为标准（手机横放和竖放的时候会造成宽度和高度的改变），1vmax就是这个标准的1/100。
详见：http://www.css88.com/book/css...

@grid: 5x8 / 100% 100vh;

另外这样写的话，就代表5行8列，宽度为100%，高度为100vh；若只写一个，那么行列相同，宽度和高度也相同。

以下可以说明：

图案和渐变

@shape: clover 5;

官方拥有一个图案库：

没错啦，这个小花花就在这些图案里面。
颜色、尺寸还有平移位置也都设置了一个过渡的范围，这样就可以出现一种随机分布的效果。

添加字符


  :doodle {
    @grid: 20 / 100vmax;
    background: #12152f;
    font-family: sans-serif;
  }
  :after {
    content: "@hex(@rand(0x2500, 0x257f))";
    font-size: 5vmax;
    color: hsla(
      @rand(360), 70%, 70%,
      @rand(.9)
    );
  }

效果图如下:

想插入文字的话，都是用了伪类来实现的，这里的content的字符编码是以下的一些，所以就有了成品中的那些“字图案”：

如何使用

可以引入CDN直接使用：

也可以npm install css-doodle再import CSSDoodle from "css-doodle"。
最后再推荐大漠老师写的文章，有更加详细的说明：一个制作Web图案的组件：css-doodle

除此之外，官网还有更多变量说明，也有JavaScript的接口，希望你能用它创造出更多美丽惊艳的效果^-^。

专线服务 idc机房托管初长成小白初初体验小白初入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116761.html

jointJS(一）--关于jointJS的初认识

摘要：最近由于项目需要，开始接触，妥妥不停刷文档模式，先写一下对于的粗浅认识吧。我们可以使用已提供的图元素绘图，也可根据需求自定义一些图元素。另外，它极易上手且操作简单，并且支持所有的现代浏览器。最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，Joi...

jas0n 2019-08-20 11:24 评论0 收藏0
爬虫养成记 - 网络下载器urllib2初认识

摘要：申明本系列文章借鉴了慕课网的课程，。慕课网是一个非常赞的学习网站。是下的一个模块，在中，被拆分成和实现一个最简单的下载器使用函数可以给服务器发送一个请求。该函数返回一个该返回的对象有三个额外的函数取得服务器返回的。默认没有的，请求方式为。申明：本系列文章借鉴了慕课网的课程，http://www.imooc.com/learn/563。慕课网是一个非常赞的学习网站。 urllib2是p...

AlphaWallet 2019-07-25 11:25 评论0 收藏0
细说Unicode(一) Unicode初认识

摘要：所以中国人自己创造了一种字符编码，每个汉字和符号用两个字节来表示。第一个字节称为高位字节，第二个字节称为低位字节。而目前为止我们使用最广泛的中文编码还是。网站开发中经常会被乱码问题困扰。知道文件编码错误会导致乱码，但对其中的原理却知之甚少。偶然从某篇文章了解了Unicode，发现从这条线出发也牵引出了一系列缺失的知识点。通过研读文章，基本了解了一些以前不明白的问题，所以整理了几篇，从...

loostudy 2019-08-21 11:28 评论0 收藏0
【个人向】redux初认识

摘要：创建过程引入根第二个参数可选用于设置初始状态。本质是一个普通对象，必须要有属性来标识每一个不同的动作。尽量减少在中传递的数据。要给一个初始值。这个函数会调用这两个，并且把两个结果并成一个树。前言其实这不是自己第一次看到redux吧，只是之前瞧见的时候，感觉不太好理解它想要表达的意思。后来寒假的时候做APP用到了mobX，同样是状态管理，但是我觉得mobX的语法非常容易理解。也是因为...

ralap 2019-07-24 15:21 评论0 收藏0
写给初入门/半路出家的前端er

摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序员应该不在少数，我也是其中之一。为何会走向前端非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 评论0 收藏0