CSS-doodle体验

最近发现一个有趣的用CSS绘制Web图片的组件。官网将其描述为:

A web component for drawing patterns with CSS.

[注意]:该组件目前只能在最新的Chrome和Safari浏览器上正常运行。如果想在其他浏览器上使用,则需要相关的polyfills。

一、引入

还是三种熟悉的使用方式:

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

2.将其下载到本地引入

1
<script src="path/to/ss-doodle-0.4.2.min.js"></script>

3.通过npm的方式安装再引入项目中

1
2
npm install css-doodle
import CSSDoodle from 'css-doodle'

二、语法

主要是基于++Shadow DOM V1++和++Custom Elements V1++来构建的。语法是基于CSS的,提供了一些的实用函数和简写的属性。

常用的一些选择器、属性和函数:

  • :doodle:是一个特殊的选择器,其指向的是组件元素本身,即
  • :container:是容纳所有单元格的容器元素。它使用网格布局进行样式设置。
  • @even:对应的偶数单元格
  • @odd:类似于@even,对应的是奇数单元格
  • @grid:创建一个网格,其后面配置的参数说明你要创建的网格
  • @place-cell:将单元格相对布局
  • @size:设置单元格的width和height
  • @use:从自定义属性导入样式,允许从普通的css文件中编写样式
  • @shape:返回使用clip-path和polygon()生成的css形状
  • @index():是一个函数,返回当前单元格的索引号,注意其开始值是从1开始
  • @rand:从数字的范围内返回一个随机值
  • @pick:给定的列表中随机选取一个值
  • @calc(expr)、@abs()支持数学函数,以@为前缀
  • :after:每个单元格的伪元素,用于生成内容,比如demo中看到的字母和一些unicode编码的符号
    JavaScript API还可以实现现有交互效果的图案
    demo中使用了.update()函数,当你在屏幕单击时,整个组件会使用给定的样式重新刷新。
    目前提供的API有grid、use和update

三、示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/HTML
<css-doodle class="doodle">
:doodle {
@grid: 20/ 100vmax;
background: #121525;
}
:after {
font-family: devicons;
content: '\@hex(@rand(0x1234,0x5678))';
font-size: 3vmax;
color: hsla( @rand(360), 70%, 70%,@rand(.9) );
}
@keyframes turn {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
:hover {
animation: turn 1s ease-in-out infinite; }
</css-doodle>

除了选择器和几个函数外,都是CSS中的语法,很好理解。

1
@grid: 20/ 100vmax;

表示创建一个横竖均为20格,以可视范围的宽度或高度中较大的那个尺寸为网格的边长。

1
color: hsla( @rand(360), 70%, 70%,@rand(.9) );
  • 这次还接触到了使用hsl和hsla表示颜色的方法

    H:
    Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

    S:
    Saturation(饱和度)。取值为:0.0% - 100.0%

    L:
    Lightness(亮度)。取值为:0.0% - 100.0%

    A:
    Alpha透明度。取值0~1之间。

  • 以及CSS3中添加动画的方式
    在@keyframes中创建动画,记得把它捆绑到某个选择器,否则不会产生动画效果。
1
animation: turn 1s ease-in-out infinite;

至少规定以下两项 CSS3 动画属性

  1. 规定动画的名称
  2. 规定动画的时长
  • 添加点击事件:
    利用JS API中.update()更新组件
1
2
3
4
5
/JS
const Doodle = document.querySelector('.doodle');
Doodle.addEventListener('click', () => {
Doodle.update();
});

Demo

四、总结

在使用上目前所支持的浏览器较少,该组件运行的原理是使用CSS Grid和纯CSS规则制作的一些图案。除了CSS自带的规则之外,该组件还封装了一些函数和属性,能让你快速制作一些图案,还可以使用Unicode字符创建一些字符图案,也可以直接使用SVG作为背景图像。

参考:

官方文档

CSS3动画

CSS中的尺寸单位