前言
今天的主角是css-doodle,不知道有多少人知道的,反正我是第一次了解这个东西,智慧树我们都用过,但是大家有没有观察过智慧树的登录页面的背景。大家可以点击登录界面查看一下。
智慧树在线教育_全球大型的学分课程运营服务平台 (zhihuishu.com)
感觉是不是很神奇,能够和鼠标进行互动的动态粒子特效,我当时就突发奇想能不能也制作一款类似的炫酷粒子特效,结果就了解到了<css-doodle />
css-doodle简介
<css-doodle />基于 Shadow DOM v1 和 Custom Elements v1。 现在可以在所有主流浏览器上使用它,而无需 polyfill。
该组件将通过其中的规则(纯 CSS)生成一个 div 网格。 您可以使用CSS轻松操作这些单元格,以提出图形图案或动画图形。
官方介绍是:A web component for drawing patterns with CSS. 一个绘制css图案的组件
css-css-doodle引入
方法一:
直接从 CDN 引用
<script src="https://unpkg.com/css-doodle@0.37.3/css-doodle.min.js"></script>
<css-doodle>
/* put your code here */
</css-doodle>
方法二:
从 npm 安装它,并在 JavaScript 中导入模块:
npm install css-doodle
/* import it */
import 'css-doodle';
用法:
css-doodle的语法基于CSS,并提供了一些额外的实用程序 函数和速记属性。
属性:
网格:
网格中的行数和列数由元素上的属性定义, 范围从1到64。如果未给出值或 0,则默认为 1x1
<css-doodle grid="5">
:doodle {
grid-gap: 2px;
width: 20em; height: 20em;
}
background: #60569e;
</css-doodle>
运行效果
仅当网格为一维时,行或列才限制为 4096:
<css-doodle grid="1x35">
:doodle {
grid-row-gap: 2px;
@size: 20em; /* width: 20em; height: 20em; */
}
background: #60569e;
width: @rand(5%, 100%); /* from 5% to 100% by random */
</css-doodle>
还有另一种使用 @grid 属性进行设置的方法。
<css-doodle>
:doodle {
@grid: 5 / 20em;
}
background: #60569e;
transform: scale(@rand(.2, .9));
</css-doodle>
遵循 (col, row) 或 (x, y) 的顺序。 以下值格式都是可识别的:
grid = "0"
grid = "5"
grid = "20"
grid = "5x7"
grid = "5 x 7"
grid = "5,7"
涂鸦:
这是一个特殊的选择器,指示组件元素本身。 使用涂鸦,样式将被外面的普通CSS文件覆盖。
<css-doodle grid="5">
:doodle
{
grid-gap: 5px;
width: 20em; height: 20em;
}
background: #60569e;
:doodle { --s: 0 }
:doodle(:hover) { --s: 3 }
transition: .5s cubic-bezier(.75, .85, .2, 1.5);
transition-delay: @rand(500ms);
transform: translateY(calc(var(--s) * 100%));
</css-doodle>
将鼠标悬停在涂鸦上 查看动画效果
容器:
保存所有单元格的容器元素 使用的是网格布局,继承了所有的网格属性
其它属性:
@nth:选择第 n 个单元格。
@even:选择喜欢但更短的单元格。
@odd:选择单元格。
@at:选择特定列和行的单元格。
@pick(v1, v2,...) :从提供的参数中随机地取一个值。
@row:返回当前单元格所在的行位置。
@col:返回当前单元格所在的列位置。
示例: