houdini

要想了解更多Houdini知识，可以参考：CSS Houdini：用浏览器引擎实现高级CSS效果 ## 前言 让我们先来看下这个效果： 其代码如下： css body { background: #333; } .card { position: relative; width: 20rem; height: 50vh; margin: auto; background-image: linear-gradient( 0deg, #5ddcff, #3c67e3 43%, #4e00c2 ); } .card::after { position: absolute; content: ""; inset: 16px; background: #191c29; border-radius: inherit; } ## 需求 如代码中所示，卡片背景是一个渐变背景。 现在假设我们有一个需求：让渐变背景旋转起来，如何实现呢？ 假如我们这样写代码： css .card { ... animation: rotate 3s linear infinite; } @keyframes rotate { to { background-image: linear-gradient( 360deg, #5ddcff, #3c67e3 43%, #4e00c2 ); } } 或者 css .card { --direc: 0deg; background-image: linear-gradient( var(--direc), #5ddcff, #3c67e3 43%, #4e00c2 ); } @keyframes rotate { to { --direc: 360deg; } } 这两种方式会让渐变背景旋转嘛？ 答案肯定是不会的。 让我们回到原点：css让动画生效有两个条件。 > 1. 它必须是一个属性。 > 2. 它的值必须是一个数字。 ## 解决 所以我们可以参考 Houdini API，在 CSS 中自定义一个属性： css body { background: #333; } @property --direc { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { position: relative; width: 20rem; height: 50vh; margin: auto; background-image: linear-gradient( var(--direc), #5ddcff, #3c67e3 43%, #4e00c2 ); animation: rotate 3s linear infinite; } .card::after { position: absolute; content: ""; inset: 16px; background: #191c29; border-radius: inherit; } @keyframes rotate { to { --direc: 360deg; } }