css-doodle——华丽炫酷的CSS

  前言

今天的主角是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：返回当前单元格所在的列位置。

示例：