前言：首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果，实际就是渐变背景的旋转。但是在以前，渐变背景是不支持动画的。现在我们可以利用浏览器新出的 Houdini API 来实现这个动画效果。Houdini API 特别强大，允许开发者干扰浏览器渲染过程。其中有一个属性@property 允许开发者在样式代码里面，自己定义样式属性。
效果图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
body {
background: #000;
}
.card::before {
z-index: -1;
filter: blur(20px);
}
.card::after {
content: "";
position: absolute;
inset: 8px;
background: #191c29;
border-radius: inherit;
}
@property --direc {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.card {
position: relative;
width: 200px;
height: 400px;
margin: 100px auto;
--direc: 0deg;
color: red;
background-image: linear-gradient(
var(--direc),
#5ddcff,
#3c67e3,
43%,
#4e00c2
);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to {
--direc: 360deg;
}
}
</style>
</head>
<body>
<div class="card"></div>
<script></script>
</body>
</html>
