前言

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

<css-doodle>: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%));
</css-doodle>

效果如下图所示:

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

布局

:doodle这个选择器选中的是<css-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;

官方拥有一个图案库：

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

添加字符

<css-doodle>: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));}
</css-doodle>

效果图如下:

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

如何使用

可以引入CDN直接使用：

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

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

css-doodle初认识相关推荐

CSS Doodle 生成器
我们可以通过 CSS 将最复杂的布局带入生活,但我们也可以生成有趣的艺术品和涂鸦.CSS Doodle 用于使用 CSS 绘制图案.该组件包括大量实用功能和可使用的速记属性.因此,该组件将生成一个 d ...
css-doodle_如何使用CSS Doodle用CSS绘制图案
css-doodle CSS帮助我们以各种方式发挥创造力,今天,我们将把CSS创造力提升到一个新的水平. 我们将使用一个称为CSS Doodle的工具来创建一些很棒的重复模式. CSS Doodle是 ...
css值变量吗,CSS变量初体验
根据Mozilla软件工程师Cameron McCormack的透露,火狐浏览器从V29版开始支持一种新的CSS特征--CSS变量.下面这个视频可以让你大概的了解一下CSS变量的基本情况: CSS变量 ...
前端三剑客之 CSS - JavaEE初阶 - 细节狂魔
文章目录前言 CSS CSS 的引入方式 CSS 的代码风格样式格式样式大小写选择器选择器的分类 1.基础选择器标签选择器类选择器 id 选择器通配符选择器提示复合选择器后代选择 ...
CSS网页制作布局实例教程
本教程最终效果如下(浏览示例页面): 本教程素材及页面源代码下载教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技 ...
增加一行减少一行_【第2171期】一行 CSS 代码的魅力
前言在某次会上是见过css Doodle制作的美.今日前端早读课文章由shopee@ChokCoco,公号:iCSS前端趣闻投稿分享. 正文从这开始~~ 之前在知乎看到一个很有意思的讨论一行代码可 ...
vscode css提示_lt;css-doodle/gt;让你成为CSS艺术家
说到css-doodle,那要追回到第五届CSS大会,那是袁川大佬在css大会首秀,属实惊艳. 袁川大佬当时演讲的PPT:https://yuanchuan.dev/talk/generative-a ...
CSS奇思妙想 -- 使用 background 创造各种美妙的背景（上篇）...
本文将介绍一些利用 CSS 中的 background.mix-blend-mode.mask 及一些相关属性,制作一些稍微复杂.酷炫的背景. 通过本文,你将会了解到 CSS background 中 ...
CSS奇思妙想—这里是CSS创造的世界！
CSS奇思妙想 -- 使用 CSS 创造艺术本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍 ...
360 css grid,【第2210期】使用 CSS 创造艺术
原标题:[第2210期]使用 CSS 创造艺术前言周末愉快.今日前端早读课文章由虾皮@SbCoco投稿, 公号:iCSS前端趣闻分享. 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍如何借 ...

css-doodle初认识

前言

一个例子

布局

图案和渐变

添加字符

如何使用

css-doodle初认识相关推荐

最新文章

热门文章