前言：
边框流动动画是一种非常常见的效果，能够让网页看起来更加生动有趣。通过使用 CSS3，我们可以轻松地实现这种动画效果。本文将介绍如何使用 CSS3 实现边框流动效果，下面一起来看看吧。
示例图：边框是动画持续变化的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过 houdini api 实现，css 样式干预，它定义的不是一个简单变量，而是 css 属性*/
/*
syntax：表示这个属性值的类型
initial-value：默认值是什么
inherits：是否可以被继承
*/
@property --direc {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card {
--direc: 0deg;
width: 200px;
height: 400px;
padding: 10px;
margin: 100px auto;
background-image: linear-gradient(
var(--direc),
#5ddcff,
#3c67e3 43%,
#4e00c2
);
animation: rotate 3s linear infinite;
}
.content {
width: 100%;
height: 100%;
background-color: #fff;
}
@keyframes rotate {
to {
--direc: 360deg;
}
}
</style>
</head>
<body>
<div class="card">
<div class="content"></div>
</div>
</body>
</html>
