css3波浪纹路_CSS Houdini实现动态波浪纹效果

CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以往完全黑盒的浏览器解析流开始对外开放，开发者可以自定义属于自己的 CSS 属性。

背景

我们知道，浏览器在渲染页面时，首先会解析页面的 HTML 和 CSS，生成渲染树(rendering tree)，再经由布局(layout)和绘制(painting)，呈现出整个页面内容。在 Houdini 出现之前，这个流程上我们能操作的空间少之甚少，尤其是 layout 和 painting 环节，可以说是完全封闭，极大地限制了 CSS 的灵活性。社区中 sass、less、stylus 等 CSS 预处理技术的出现大多都源于这个原因，它们都希望通过预编译，突破 CSS 的局限性，让 CSS 拥有更强大的组织和编写能力。所以慢慢地，我们都不再手写 CSS，更方便、更灵活的 CSS 扩展语言成了 web 开发的主角。看到这样的情况，CSS Houdini 终于坐不住了。

什么是 CSS Houdini？

CSS Houdini 对外开放了浏览器解析流程的一系列 API，这些 API 允许开发者介入浏览器的 CSS engine 运作，带来了更多的 CSS 解决方案。

CSS Houdini 主要提供了以下几个 API：

CSS Properties and Values API

允许在 CSS 中定义变量和使用变量，是目前兼容性最好的一个 API；

Layout API

允许开发者编写自己的 Layout Module，自定义诸如 display 这类的布局属性；

Painting API

允许开发者编写自己的 Paint Module，自定义诸如 background-image 这类的绘制属性。

基础：三步用上 Painting API

1、HTML 中通过 Worklets 载入样式的自定义代码：

if ("paintWorklet" in CSS) {

CSS.paintWorklet.addModule("paintworklet.js");

}

Worklets 也