houdini
6views
要想了解更多Houdini知识，可以参考：CSS Houdini：用浏览器引擎实现高级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;
}
需求
如代码中所示，卡片背景是一个渐变背景。
现在假设我们有一个需求：让渐变背景旋转起来，如何实现呢？
假如我们这样写代码：
.card {
...animation: rotate 3s linear infinite;
}
@keyframes rotate {
to {
background-image: linear-gradient(
360deg,
#5ddcff,
#3c67e3 43%,
#4e00c2
);
}
}或者
.card {
--direc: 0deg;
background-image: linear-gradient(
var(--direc),
#5ddcff,
#3c67e3 43%,
#4e00c2
);
}
@keyframes rotate {
to {
--direc: 360deg;
}
}
这两种方式会让渐变背景旋转嘛？
答案肯定是不会的。
让我们回到原点：css让动画生效有两个条件。
- 它必须是一个属性。
- 它的值必须是一个数字。
解决
所以我们可以参考 Houdini API，在 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;
}
}