使用 Houdini 自定义变量改造，化腐朽为神奇：
@property --offset { syntax: '<length>'; inherits: false; initial-value: 0; } div { text-underline-offset: var(--offset, 1px); text-decoration: underline; transition: --offset 400ms, text-decoration-color 400ms; &:hover { --offset: 10px; color: orange; text-decoration-color: orange; } }可以得到丝滑的过渡效果：
CodePen Demo - Underlines hover transition(Chrome solution with Houdini)
实战一下，使用 CSS @property 配合 background 实现屏保动画嗯，因为 CSS @property 的存在，让以前需要非常多 CSS 代码的工作，一下子变得简单了起来。
我们尝试利用 CSS @property 配合 background，简单的实现一个屏保动画。
我们利用 background 可以简单的得到这样一个图形，代码如下：
html, body { width: 100%; height: 100%; } body { background-image: radial-gradient( circle at 86% 7%, rgba(40, 40, 40, 0.04) 0%, rgba(40, 40, 40, 0.04) 50%, rgba(200, 200, 200, 0.04) 50%, rgba(200, 200, 200, 0.04) 100% ), radial-gradient( circle at 15% 16%, rgba(99, 99, 99, 0.04) 0%, rgba(99, 99, 99, 0.04) 50%, rgba(45, 45, 45, 0.04) 50%, rgba(45, 45, 45, 0.04) 100% ), radial-gradient( circle at 75% 99%, rgba(243, 243, 243, 0.04) 0%, rgba(243, 243, 243, 0.04) 50%, rgba(37, 37, 37, 0.04) 50%, rgba(37, 37, 37, 0.04) 100% ), linear-gradient(rgb(34, 222, 237), rgb(135, 89, 215)); }效果如下，还算可以的静态背景图：
在往常，我们想让它动起来，其实是需要费一定的功夫的，而现在，通过 CSS @property，对我们希望进行动画的一些元素细节进行改造，可以得到非常不错的动画效果：
body, html { width: 100%; height: 100%; } @property --perA { syntax: '<percentage>'; inherits: false; initial-value: 75%; } @property --perB { syntax: '<percentage>'; inherits: false; initial-value: 99%; } @property --perC { syntax: '<percentage>'; inherits: false; initial-value: 15%; } @property --perD { syntax: '<percentage>'; inherits: false; initial-value: 16%; } @property --perE { syntax: '<percentage>'; inherits: false; initial-value: 86%; } @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } body { background-image: radial-gradient( circle at var(--perE) 7%, rgba(40, 40, 40, 0.04) 0%, rgba(40, 40, 40, 0.04) 50%, rgba(200, 200, 200, 0.04) 50%, rgba(200, 200, 200, 0.04) 100% ), radial-gradient( circle at var(--perC) var(--perD), rgba(99, 99, 99, 0.04) 0%, rgba(99, 99, 99, 0.04) 50%, rgba(45, 45, 45, 0.04) 50%, rgba(45, 45, 45, 0.04) 100% ), radial-gradient( circle at var(--perA) var(--perB), rgba(243, 243, 243, 0.04) 0%, rgba(243, 243, 243, 0.04) 50%, rgba(37, 37, 37, 0.04) 50%, rgba(37, 37, 37, 0.04) 100% ), linear-gradient(var(--angle), rgb(34, 222, 237), rgb(135, 89, 215)); animation: move 30s infinite alternate linear; } @keyframes move { 100% { --perA: 85%; --perB: 49%; --perC: 45%; --perD: 39%; --perE: 70%; --angle: 360deg; } }效果如下（因为 Gif 上传大小限制，加快了速率，截取了其中一部分，简单做个示意）:
整体的效果还是挺不错的，完整的 Demo 你可以戳这里：
CodePen Demo -- CSS @property PureCSS Wrapper
参考文献： 最后好了，本文到此结束，介绍了 CSS Houdini API 中的 CSS @property 部分，并且利用它实现了一些以往无法简单实现的动画效果，希望对你有帮助