最近发现一个有趣的用CSS绘制Web图片的组件。官网将其描述为:
A web component for drawing patterns with CSS.
[注意]:该组件目前只能在最新的Chrome和Safari浏览器上正常运行。如果想在其他浏览器上使用,则需要相关的polyfills。
一、引入
还是三种熟悉的使用方式:
- 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
2npm 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 | /HTML |
除了选择器和几个函数外,都是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 动画属性
- 规定动画的名称
- 规定动画的时长
- 添加点击事件:
利用JS API中.update()更新组件
1 | /JS |
四、总结
在使用上目前所支持的浏览器较少,该组件运行的原理是使用CSS Grid和纯CSS规则制作的一些图案。除了CSS自带的规则之外,该组件还封装了一些函数和属性,能让你快速制作一些图案,还可以使用Unicode字符创建一些字符图案,也可以直接使用SVG作为背景图像。
参考: