如何用浏览器引擎借助CSS Houdini打造独特高级动态效果？

本文共计5390个文字，预计阅读时间需要22分钟。

CSS自诞生以来，其特性经历了漫长的演变。从最初的基础样式到现代浏览器普遍支持的特性，CSS的发展历程相当漫长。例如，CSS+Houdini的引入，为开发者打开了底层接口，可直接操控CSS的原始效果，从而实现更为复杂、流畅的动画和效果，无需额外等待。

CSS的任何新特性从诞生到被浏览器普遍支持，要经历漫长的周期，而CSS Houdini开放了底层接口，让开发者直接接触、开发原生的CSS效果，实现更为复杂、流畅的效果和动画，无需等待，快学起来吧！

vivo 互联网前端团队-Wei Xing

Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相关的浏览器API的总称。

一、Houdini 是什么

在了解之前，先来看一些Houdini能实现的效果吧：

反向的圆角效果（Border-radius)：

动态的球形背景（Backgrond）：

彩色边框（Border）：

神奇吧，要实现这些效果使用常规的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些效果只是冰山一角，CSS Houdini能做的有更多。（这些案例均来自Google Chrome Labs，更多案例可以通过Houdini Samples查看）。

看完效果，再来说说Houdini到底是什么。